Space between Top Menu Items

[detech]

Looked through the archives but don’t see something simple showing how to space out the top menu items

I want to evenly fill the empty purple space and separate the four menu items so there is more space between them.

Doing so will it make it so I can add longer text to the sub-items because when I put some longer text it drops down to another line cause the width isn’t wide enough.

Thanks in advance.

[kory]

Howdy, @detech! Thanks for writing in…to accomplish this particular type of setup, I would use the following markup in your header:

Basically, three separate Containers, one to hold each Element in your Header (your logo, your nav, and your button). For the middle Container holding the nav, go to its Flexbox control group and set its Self Flex value to Fill Space Equally:

This will force the container to fill up all the available space between your logo and your button. Next, inspect the Navigation Element inside the Container and go to its Flexbox control group to set the same value for its Self Flex control:

This will tell the Navigation Element to grow to fill all available space inside of its parent Container, which we have also instructed to grow to fill all available space. This should help get you the results you’re after…cheers!