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
Arkanit
Arkanit11mo ago
Here's a quick solution: You can set scrolling to these elements with margin of your navbar's height:
#projects,
#welcome-section {
scroll-margin-top: 58px;
}
#projects,
#welcome-section {
scroll-margin-top: 58px;
}
Or set it for any element with id attribute:
[id] {
scroll-margin-top: 58px;
}
[id] {
scroll-margin-top: 58px;
}
Or set the paddings:
#projects,
#welcome-section {
padding-top: 58px;
}
#projects,
#welcome-section {
padding-top: 58px;
}
Bulelani Botman
Bulelani Botman11mo ago
Thank you, so much! @Arkanit I will try it & come back if it didn't work [Edit] The scroll margin actually worked, thank you!
Want results from more Discord servers?
Add your server