Problem with Logo flex (center) in the NavBar (bug?)

Hi guys
I have a problem that I think has been discusssed and is a known bug - I cant get my logo to vertically center in the Nav container.

I have tried the workaround (shown in the image) by using a new div instead of the old container – but I still don’t get any centering.

Please help!

Read only link - any other design thoughts much welcomed!

https://preview.webflow.com/preview/brandalerts?utm_medium=preview_link&utm_source=designer&utm_content=brandalerts&preview=778b13ee7421f6b1e073a48824a97979&workflow=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @sj8070, thanks for your post, do you want the logo to center and other links underneath, or just nav logo center in space between current logo position and the start of the first link in the nav menu?

I am not sure what known bug you are referring, do you have another post link that discusses the issue?

To my knowledge, there is no bug for centering elements within a flex parent div such as the navbar…

I am not sure what you are trying to accomplish, but here is a video I made:

Thanks in advance

Hey. Thank you so so much for answering the quesiton and even posting a video. Very cool that the community is this great.

I was just trying to center it vertically. Sorry i shouldve said that.
And when I try and set the Logo Block to flex and center it vertically, it doesnt work.
When I googled people said this was a bug

Hi @sj8070, currenltly your navbar is having a horizontal layout, how do you want the navbar positioned on the page?

Like do you want the navbar vertically on the page with logo in top left corner? I am just trying to understand in space and time how you want the logo to appear.

Do you have some mockup design you have that you can show how you want it to appear?

Right now the styling is restricted to auto height of the menu, and the logo is already vertically centered in that space.

It could also be the top padding on your links make the logo appear to be out of center:

Shared with CloudApp

Hi. I like everything as it is, in terms of the positoining and heigh of the navbar.

I just want the logo on the left to be vertically centred in the navbar! (you can clearly see, when you lcick the container, that it is ‘top’ aligned)

Hi @sj8070 , here is how it looks without the top padding on the navlinks:

Shared with CloudApp

Is this what you were after?

Thanks. BUt it’s actually a more conceptual quesiton about how I would vertically center the ‘Logo Block’ within the ‘Container’ so that if i didnt change any sizings, it would be centred in that block. I expected the flex in container to do it

Hi @sj8070, if you want the logo flex centered vertically in the container, the container should be set to align/justify center depening on what you want:

Shared with CloudApp

Currently there is no flex styling present:

Shared with CloudApp

I would remove any top/bottom padding for elements within the container to avoid any apparent misalignment of elements.

I am not sure if that is still what you are asking for though

Hey. Yes I made a more clear snip to show it.
The logo block is at the top of that container. Top aligned.
I want it centered.
If I change that container to flex, it doesnt work…

Capture

Hi there,

Thanks for your reply, can you try this what is shown in my video?

Thanks in advance

Thanks!

I understand it now. I was trying to do Flex layout on the Logo Box. I thought it was the ‘thing’ you could center, rather than the Container needing to be set up like that.

My problem now… How do I vertically center the logo, whilst keep the Nav Menu on the right…

THanks!

Hi @sj8070, I made a new video, does this help

FYI, a good place to learn flexbox is the flexbox game that Webflow created at https://flexboxgame.com

Thanks in advance

1 Like

Brilliant - thank you so much!
How does kudos work here?!

1 Like

Hi @sj8070, if you find a post useful, you can set the solution mark as you have done and click on the heart if you find a post, even one not your own to be helpful :slight_smile:

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.