Nav bar height isn't properly mobile responsive - html

Question

What I'm Trying To Do (including JSBin)
My nav bar works fine on a desktop: when you click on an item, it scans to that section of the page, beginning with the header. However, when I resize to mobile, the spacing is off. When you click on "Section 2" on the navbar, you should see "Section 2" pop up directly below the navbar.
See example on JSBin.(Use Developer tools to show on mobile to see the problem when clicking around the nav bar).
What I've Tried/What I Think The Problem Is
I'm pretty sure it has to do with this:
.anchor:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}
Which I got from this Github page, but I can't figure out how to automatically change the 75px number depending on the screen size. I read this question/answer but still can't figure out how to change the CSS in my case.

Answer 1

It looks like that page is for Bootstrap. What you're looking for is built directly into CSS!
Check out this page.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Essentially what's happening to you is that, once your page is scaled down to a mobile device. It causes your buttons (the text elements) to stack, causing your nav to be vertically larger than it should be!
To answer your code question try something like this:
.anchor:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}
#media only screen and (max-width: 480px) {
.anchor:before {
height: 65px;
}
}
What happens is that once your screen width goes unter 480px (this value can be tweaked to whatever you need it to be) it will run the height: 65px; and override the height style from the one above it.
Another way you can prevent your nav bar from resizing when you don't want it to is by setting overflow: hidden; and then specifically defining what you want the height to be. (Personally I like to use height: 47px;. It feels like a perfect size to me)
That should answer your question. However, what you should really do is look into compiling all of your nav buttons into a dropdown menu once your screen shrinks to be small enough.
If you're feeling up to it, check out this page:
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp