Top navbar: vertically center and make width consistently larger with flexbox

Hello community!

I’d like to vertically center all items in the navbar using flexbox the right way and to increase the width so it goes to the same width as the other items on the page.

VERTICALLY CENTER

I found another forum topic around vertically centering a logo, but it was using margin %s. I’m wondering if there is a way to do it with flexbox.

This is what it looks like:

When that’s selected, I’ve set the vertical alignment of the flex-child property to be center, but it’s not working.

image

The button is also not vertically centered.

SAME WIDTH

Example: I’d like the logo to be the same width as the section with the six items below it.

It should be the same width as this other wider section of the page.

Here is my read-only link:
https://preview.webflow.com/preview/fairstreet2?utm_medium=preview_link&utm_source=designer&utm_content=fairstreet2&preview=3d60086fb4cf3a2a516094e11cce88a7&workflow=preview

Thank you in advance for your help :pray:

Hi @webflowfs

All 3 need their own Div. Place one div for logo, one for links and another for demo button. Then space them out with the 4th justify, space evenly between.

Thank you for the quick response, @garymichael1313 !

I’ve done this now based on your answer. Should I nest the demo button in the links div?
image

This is what the properties for Navbar look like:
image

This is what the properties for Container look like:
image

I did space-between, but it’s still not centered

Now move the button out of that div into it’s own. Then the main parent div that holds all of them will have the flex settings on it. This will space all 3 out to the edges with the links centered.

Post your read-only link so I can see what you’ve done.

Hmm, I’ve moved it out now. Here is the read-only link: https://preview.webflow.com/preview/fairstreet2?utm_medium=preview_link&utm_source=designer&utm_content=fairstreet2&preview=5c8e8a1edabbf36992854274e8051137&workflow=preview

I’ve mocked up what I’d like it to look like:

Oh I see now… it’s really simple. The navigation menu needs the same class as ‘Container’'; not ‘Container 8’. If you delete the class and change it to just container, it fits perfectly.

@garymichael1313 amazing, it works!!! Thank you! Do you know how I might vertically center the items within the navbar? In particular, the logo and button?

https://preview.webflow.com/preview/fairstreet2?utm_medium=preview_link&utm_source=designer&utm_content=fairstreet2&preview=d5915c9710dcf33c93e8e3fbc204913f&workflow=preview

Yep, the same way. Add flex to the parent div. Each link will need flex center too.

@garymichael1313 that worked on the button! But not on the logo?

https://preview.webflow.com/preview/fairstreet2?utm_medium=preview_link&utm_source=designer&utm_content=fairstreet2&preview=07971e8c87be7612158737e5c3ac2c70&workflow=preview

The nav link 3 has inner padding all around. Take the margins off the logo text and make sure it’s the same. Add inner padding top & bottom of 20, like the links. And use EM’s in the typography settings to match. Essentially, make all of them the same and they’ll align center.

Thank you so much for all your help, @garymichael1313 !!! Really appreciate your patience and multiple replies.

Not a problem, glad to help. See ya :grin:

1 Like

See you @garymichael1313 ! :wave: