Responsive club website ~ groupfixed navbar overlaps with link gets clicked


I made this website for the responsive club website and here is my respository.
When a link in the navbar gets clicked, it will linkh correctly but then the navbar covers the first part of the section.
for instance, when I click ‘Acties’ I see this:

but i’d like to see this, where ‘saboteursacties’ still is visible:

How can I fix this?

Hi @marcusde36ste
your <h2> is behind the fixed positioned navbar. Add a padding to section which is at least as large as the navbar is.

Actually I think you’re past that level and have thought of that before. So what prevents you from setting a higher padding-top to the section?

1 Like

Thanks for your help (again! :smiley: )

Yes, I think this is the best solution. It’s just that the start of the section now feel a bit off. this is best shown at the ‘agenda’ section which starts with ’ Deze activiteiten kunt je verwachten!’ and now has a green padding as big as the entire section.

I guess this is what comes with this kind of navbar. I’m a Haarspalter.

Good :smile: you should be, at least on design matters…
You could just exclude the section:last-child on large screens to avoid that, because on large screens that element never gets to the top of the viewport anyway.
Have you considered setting your sections (except the last one) to min-height: 100vh?

1 Like

Nice practical designtip, thanks!

Thanks for the tip, I don’t like it here because I think the first section is way to short for it but it’s definitely something to keep in mind, it can really change the feel of the website a bit. :smiley:

1 Like