Kevin Powell - Community•6mo ago

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•6mo 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•6mo 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!

Gaming

Programming

A Problem With Setting The <main> Content To Full Viewport!