Fixed nav-bar covering the header

how do I make it so the nav-bar does not cover the header or other paragraphs when I add padding to the nav-bar?

I’m not sure I understand your question. You’re nav bar is fixed at the top and the content scrolls underneath it. This is what most people usually want. Can you be more specific about what you are trying to do?

Update: Ahh, I guess I didn’t read your question all the way, I didn’t see the “when I add padding”. For future reference, you should keep the issue you are asking about in your project so we can see what you are seeing.

You can use the CSS property scroll-padding-top to solve this issue. You would apply it to the html element. Also, you’ll still need to push the welcome-section div (or h1) down enough so it falls below the nav bar.

Yes I agree with @bbsmooth the effect you have is actually what you want. You don’t want the welcome section to scroll over the top of your nav you want it to scroll underneath as it does. You could give your welcome section some extra padding-top so it is not so close to the nav and has some breathing room. Your fixed nav is doing what it is meant to and what the project wants it to do.
You can enlarge the nav bar if you want and just add more top padding to the welcome section to compensate and avoid overlapping.
By the way if you give your nav a left:0; as well you can lose the annoying little gap

1 Like

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