Content going behind Navbar when scrolled

Trouble with body content going behind navbar in mobile size:

Building my documentation page and in laptop size it’s fine. When you go down to mobile size, my nav bar snaps to top …thats what I want. But, when you click on navbar links to jump to that spot on the page, the content is going behind the nav bar. I want the body to be below the navbar, always. Ive tried using padding and margin, which works when you load the page, but when you click a navbar link, its still going behind the navbar and its not lined up.

Add the following css code in media query:

.main-section {
    padding-top: 330px;
 }  

and delete the entire #main-doc selector.

This is not the best solution but it can be something to start with. Remember, mobile first, then other screen sizes:
Mobile-first design is a key ingredient to successful product design. Designing for the smallest screens first, and then working your way up empowers designers to focus on the core functions of their product.

Thank you, @DobarBREND This does work, but now when you scroll every section has a padding above it, so there is a lot of dead space as you scroll the page.

Take a look at this page:

you should use the scroll-padding property to fix this.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.