Technical Documentation Passes Tests, but has a mobile view problem I'd like to fix

My technical documentation passes the tests, but there is something I would like to know how to fix, just for my own understanding.

When the page is resized for smaller devices, with the navbar at the top, clicking the Navbar links causes the section that was clicked appear at the top of the page, and to be covered up by the Navbar.

This isn’t an issue on the larger page view because the Navbar is on the left. Only when the Navbar is at the top does it cover up the section that is clicked.
Is there a way to correct this so that the section that is clicked is offset from the top to appear below the navbar?

Here’s my page. Resize it so that the Navbar is at the top to see the problem.
Thank you in advance for your help!

One way to fix this is to use a little trick in which you add positive top padding and then the same amount of negative top margin to the <section> tag so that the <header> text lines up just below the nav menu when you click on a nav link.

For example:

section {
  padding-top: 10em;
  margin-top: -10em;

This is just an example, you will need to figure out what works for your situation. I would recomment you don’t forget about the calc function in CSS.

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