Fixed navbars, with their fixed heights, can throw off the targets for anchor links, with the result of users landing x number of pixels beyond the intended anchor -- a frustrating, if minor issue . Here's how to fix that.
In the code example below, 90px is the height of the fixed header plus margin and padding. You will need to adjust this to the size of your fixed header, plus margins/padding. Source: https://www.itsupportguides.com/knowledge-base/tech-tips-tricks/how-to-offset-anchor-tag-link-using-css/
:target:before {
content:"";
display:block;
height:90px; /* fixed header height*/
margin:-90px 0 0; /* negative fixed header height */
}
Fixed navbars can throw off the targets for anchor links. Here's how to fix that.
Fixed navbars, with their fixed heights, can throw off the targets for anchor links, with the result of users landing x number of pixels beyond the intended anchor -- a frustrating, if minor issue . Here's how to fix that.
In the code example below, 90px is the height of the fixed header plus margin and padding. You will need to adjust this to the size of your fixed header, plus margins/padding. Source: https://www.itsupportguides.com/knowledge-base/tech-tips-tricks/how-to-offset-anchor-tag-link-using-css/
:target:before {
content:"";
display:block;
height:90px; /* fixed header height*/
margin:-90px 0 0; /* negative fixed header height */
}
Other posts tagged with CSS