Fixed navigation and <a href="#id"> == overlap


Here’s a problem I’m having a hard time to solve.

I have a position: fixed nav. It must be about 50px high.

This nav contains links such as <a href=“#reservation”> which brings the user to the #reservation div without leaving the page.

So far so good.

Problem is: the fixed nav overlaps the beginning of the div we reach.

Question: is there a way to tell browsers to follow <a href=“#reservation”> and not make it land at the very top of the screen?


-jj. :slight_smile:

Yes, I’ve seen that problem before and some solutions to it. Try out these lnks:

Hash Tag Links That Don't Headbutt The Browser Window | CSS-Tricks

Demo: Jump links and viewport positioning – Nicolas Gallagher

Change URL hash without page jump | Lea Verou