Jump Links: How can I move the targeted section?

[scissorsky]

Sooo, I’m currently trying to improve my documentation project (https://codepen.io/scissorsky/pen/mdLPKGK) and I’m happy with the desktop version, I’m just not happy with what it looks like on smaller screens.

As you can see, the nav-link I clicked on in this example (JavaScript and Java) takes me to the JavaScript section, but most of it gets covered by the navbar itself. Is there a way to get the sections to appear below the navbar? Google wasn’t helpful because I’m struggling to find the right key words to describe my problem. (Sorry for the confusing title, btw.)

[hbar1st]

one possibility is to use the @media to set an appropriate margin for the content you are jumping to (so as to push it down on search screens).
Another might be to use a grid layout so that the navigation always takes the first row and the content the remainder.

[lasjorg]

You can use scroll-padding-top to offset the fixed nav. It needs to be on the scroll container. The value you set is basically the height of the nav.

html {
  scroll-padding-top: 260px;
}

[scissorsky]

The margin solution didn’t work, but somebody else mentioned scroll-padding-top and that did the trick. I really appreciate your help, though. Thanks a lot!

[scissorsky]

It worked, Thank you so much! I was losing my mind because I didn’t know what exactly to look for.

[lasjorg]

It is a super handy property, made just for this.