Navbar flex issue, or am I misunderstanding something?

Hi everyone,
I came across an issue today while trying to have a specific navbar layout. For some reason, when I set the container (inside the navbar) to flex, it doesn’t beahve as would be expected for justify-content space between or space evenly. For example, for space between I would expect the logo to be at one end of the container and the nav links to be at the other, but they sit closer to the center. Am I missing something? Here’s a video of what I’m referring to:

And here’s a read only link: Webflow - test

Hi @trynix !

First welcome to the Webflow Forums :slight_smile:

Within (Container 2) are two “children”: (Brand) and (Nav Menu) they are the only two being effected by flex and so the nav links are not effected because they are children of (Nav Menu) and it is currently display (Block).

If you want to for instance space the nav buttons out I would also add a flex to the (Nav Menu) to effect the nav links.

Hopefully this helps you understand a little bit better. If you need any more help please feel free to ask or check out https://university.webflow.com/ if you havn’t.

Have a great day,

Sean

Hello and thanks for your response!

Actually my issue is specifically with Container 2. As you see in video, I set container 2 to Flex and then set justify to space-between, which means brand should go to one end of container 2, and nav menu should go to the other end. but for some reason unbeknownst to me, they are close to the center.

1 Like

Oh to fix that you need to set the order.

So if you click on a flex child for instance (Brand) under the flex child settings you should see (Order). Since you are dealing with just two flex children in this instance you can select (First) for (Brand) and (Last) for (Nav Menu).

If you were dealing with more than two flex children you select (…) to customize the order by a number similar to z-index.