I am currently using divs with id’s to be linked to in the nav-bar. Then I added a margin-bottom to each div so that when the nav items are clicked, the page shows the start of the content for each topic. If I didn’t add the margin-bottom, the content would be partially covered up by the header whenever sections were navigated to. This works but it creates unnecessary space because of the margin-bottom that I have explained. Please share advice for how I can have navigation without margins and still have the content not blocked by the header when navigated to. Here’s a link to the codepen https://codepen.io/creativecodepenuser/pen/ZEOpoPw?editors=1100 Thank you.
Some different ways of handling this but one thing you could do is to search for a CSS property called scroll-padding-top.
You could maybe accomplish it with padding-top to each section in CSS.
You can maybe move the logo to the left, have the links to the right (instead of centered) so the height of the navbar isn’t as large.
Lots of different ways to solve the problem. 
EDIT: I should have also added that just about everyone has this issue when they submit their page and no one calls them on it. You’ll learn more as you continue to grow. If you look at the sample project you’ll note it has the same issue.
1 Like
Thank you for your response. I added a scroll-snap-type and a scroll-padding-top to each section of my HTML. I removed my previous code. It’s not working though.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.