Fixed header and internal navigation links

My internal navigation links end up under my navbar due to position: fixed. I have searched and found several “solutions” but they don’t produce the desired result. Any guidance would be appreciated, my page can be found here.

Edit: I would prefer a solution that:
Contains only HTML/CSS.
Does not add space between sections.

try giving the .main-section > header a padding-top: value. The .main-section will still auto-scroll to the top of the viewport, but giving the header a top padding will push it (and the following content) below your fixed header.

Yes, but I believe that will also create an undesirable gap between my sections that I want to try to avoid on this project.

Any additional feedback would be appreciated.

There is more than one way to do this. It depends on some requirements of the target element (padding-top, margin-top, border-top, background-color). You can check out this link for more info.

This should work for you, put this in the max-width: 700px media query.

.main-section {
  border-top: 250px solid transparent;
  margin-top: -250px;
}
1 Like

Thanks for the help and the article that you linked.