Sometimes our website has a fixed header or navigation menu that usually remains fixed at the top of the page. When you use the URL anchor (the #fragment part), the browser window will scroll itself (instantly) to bring anchor at the top of the page, leaving the content behind the fixed header. So here we need for offsetting anchor hash tag links to adjust for fixed header to let content appear below the fixed item.
The solution might be useful in cases:
- When you refer a particular section in a page from another page or
- In page navigation, when you link to an anchor elsewhere in the page
In either case we just have to apply some offsetting to anchor hash tag links to let itself adjust for fix header and there is a very simple CSS rule to obtain this.
Offsetting anchor hash tag links to adjust for fixed header
<a href="#section1">Goto Section I</a>
<!-- Some more content -->
<h3 id="section1" class="offset">Section I</h3>
<p>Section specific content</p>
content: " ";
height: 150px; /* Give height of your fixed element */
margin-top: -150px; /* Give negative margin of your fixed element */
Quite simple? We are using :before pseudo element and giving it a height, which pushes up the size of the header, then use negative margin to yank it back up into place. VIEW DEMO