Make content perfectly vertically aligned with navbar

Hi everyone :slight_smile:

I want the content on my site to be covered by the navbar when you scroll down. As in: I want there to be enough space on both sides of my content, so it is always perfectly centred and covered by the navbar.

I have a hunch this might be fixable with relative positioning but don’t know how to make it work.

I hope the screenshots illustrate what I’m aiming towards. In the first two images you can (although not perfectly) see how I would like the content of my website to be displayed - the screenshot was taken in my designer. On the third image you can see how it actually displays in preview.


Here is my site Read-Only: LINK

I think I know what you are talking about. Put your navbar positioning to “fixed”, indicate where you want it to go, then set the z-index to 999. I also recommend having your navbar as wide as you can (until it hits the sides). Hopefully this helps.

I want it to be exactly the other way around. I like the navbar the way it is. But I want the content to be further in the middle. I want the spacing on either sides of the content to be just as wide as the spacing between both sides of my navbar and both sides of the screen. Just adding padding on both sides of the content doesn’t work though.

I just figured it out myself :slight_smile:

You can do it by setting a maximum width.

Thank you though!

2 Likes

Awesome! Im sorry I could not have brought the solution faster. Good luck with your website!

Great to hear! Closing the topic :webflow_heart: