A Problem With Setting The <main> Content To Full Viewport!
I have a page where I was having problems with setting the navbar at the top of the viewport. I was able to fix it with setting the border-top to some 20px whenever you load the site so that the <main> content doesn't overlap with the navbar. Now in the navbar I have two links which link to the 2 sections in the <main>! Whenever I click one link the <main> overlaps the navbar which is something I don't want. I want whenver you click the link the <section> / <main> stays below the navbar as intended and doesn't overlap the navbar content.
I have a link to the codepen to see the full code. Try loading the website in the browser & notice how <main> content is below the navbar as intended but whenever you click the "work" link in the navbar the content of the <main> it overlaps. [https://codepen.io/inalelub/pen/QWobwRW]
2 Replies
Here's a quick solution:
You can set scrolling to these elements with margin of your navbar's height:
Or set it for any element with id attribute:
Or set the paddings:
Thank you, so much! @Arkanit I will try it & come back if it didn't work
[Edit] The scroll margin actually worked, thank you!