Skip to content

Instantly share code, notes, and snippets.

@sbaechler
Created November 21, 2014 13:57
Show Gist options
  • Save sbaechler/4ddecc84475473156b20 to your computer and use it in GitHub Desktop.
Save sbaechler/4ddecc84475473156b20 to your computer and use it in GitHub Desktop.
This snippet can be used to pull up anchor tags so they are not covered by a fixed header. You can use anchor tags within floated elements and you are still able to click on links above the anchor if the header is hidden.
/**
* This snippet can be used to pull up anchor tags so they are not covered by a fixed header.
* You can use anchor tags within floated elements and you are still able to click on links above the anchor
* if the header is hidden.
*/
// dont' style anchors
a[name]:not([href]), a[name]:not([href]):hover {
color: $body-font-color;
font-family: $sansFontFamily;
font-weight: normal;
cursor: default;
h2 > &,
h3 > &,
h4 > & {
font-weight: inherit;
font-family: inherit;
}
clear: both;
}
// fix for scrolling to an anchor.
$anchor-pull-up: 4rem;
a[name]:not([href])::before {
display: block;
content: " ";
margin-top: -$anchor-pull-up;
height: $anchor-pull-up;
width: 2px;
float: left;
z-index: -1;
@media #{$medium-down} {
margin-top: -$anchor-pull-up - 2rem;
height: $anchor-pull-up + 2rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment