Tech Doc page - need help with my sections going behind my navbar

1

Hello all!

Hope everyone is being safe and well, and keeping their minds occupied on better things. Anyway, I need some help with my technical doc page!

I can’t seem to figure out the best way to fix this issue I am having where the top of my main-sections are going up and behind my navbar when in a mobile setting. So on a mobile device when I click the button my nav bar to jump to a section the top of that section is hidden under my navbar and I have to scroll down to see the heading.

I tried adding padding-top to my .main-section class and while it did the trick it also left giant gaps in between my sections which I did not like. Does anyone have any ideas on what the most efficient way to fix this would be?

Here is the link to a forked copy of my tech doc - https://codepen.io/marieensalada/pen/oNjbqxm

Any and all suggestions welcome!

2

You can pull it back up using a negative margin.

.main-section {
  padding-top: 240px;
  margin-top: -220px;
}

Some more techniques.

3

Thank you so much! That fixed it! ^.^