Vertically Centering Text Container in Center of Hero Section

Design help General
1

I am trying to utilize Flexbox to center the text content of my site’s Hero section.

However, the site’s Navbar keeps interfering with my attempts. I feel like this is a simple solution that I’m missing, but I cannot seem to figure it out. Probably has something to do with how I have my components structured out.

Here is my Read-Only link:

https://preview.webflow.com/preview/chrisrumler-com?utm_medium=preview_link&utm_source=designer&utm_content=chrisrumler-com&preview=65a7706af4be4210549b5734324c7261&workflow=preview

2

Hey Chris,

If you move your navbar outside of your .hero-section element, and give it position: sticky, as per the image below, you should then be good to set your .hero-section element to flex and you should find everything snaps into place!

Screenshot 2023-03-16 at 19.03.04

Let me know how you get on.

3

You can also utilize the webflow starter library

5

That did help. However, I’m also trying to get the background image of the hero section to also stretch up to be behind the navbar (which has its background set to transparent). However, the background image of the hero section does not want to extend up to be also behind the navbar.

Also, new Read-Only is Webflow - ChrisRumler.com

6

You need to use position fixed, like in the image, not sticky in that case.

1 Like
7

Thanks! That fixed it.