Flexbox space between navigation bar

Hey all,

I’m trying to get my nav bar to have the logo on the far left, and the nav links on the far right. I THOUGHT that flexbox space between would do that for me automatically, but as you can see from the Read-only it’s looking more like space around than space between.

Can anybody point to the super-obvious mistake I’m probably making?


Here is my site Read-Only: https://preview.webflow.com/preview/icelandicmadeeasier?utm_medium=preview_link&utm_source=designer&utm_content=icelandicmadeeasier&preview=c706aa77fc5d73447fcabb5b160fe3a3&pageId=60b80aad04e14034172ae595&itemId=60eb63be32ba84abe9d5a345&workflow=preview

hi @sigurdur130 there is simple solution and as you see flex can be sometime a bit tricky when you starting with this beast. :slight_smile: In your case you didn’t tell flex where is or what to do with remaining space. Your logo has set flex to shrink when possible so flex distribute remaining space between 2 items equally (3 identical gaps).

All you have to do is to tell flex that your logo wrapper take all remaining space with grow when possible. That’s it. :wink:

Hope this will solve your request.

@sigurdur130 and @Stan I don’t know if it’s the case here, but there’s a bug with the Container element in Webflow and Flexbox. So don’t fight, when it happens, you can just nest a div inside and make the flex box with that div.

1 Like

Hi @vincent I do not know if WF provided Navbar is based on container element or standard div. Thanks for info as I do not use WF predefined container at all.

EDIT: I have done some testing and introducing extra div works as helper. Good to know. :wink:

For future reference @vincent solution to work around this WF bug will be more valid from developer point of view. Mean introducing extra div to force flex work as it should be to avoid unpredictable behaviour of elements inside . :wink:

1 Like

It is.
CleanShot 2022-06-14 at 09.28.26@2x

ok @vincent , but it is not in this case. There is no container in @sigurdur130 Navbar. So the issue is related to navbar element it self ! Thats why I have mentioned that I do not know if Navbar is based (build) from standard div or WF container :thinking:

CleanShot 2022-06-14 at 09.01.17

Yep. It is. For the same reasons.
Webflow uses pseudo elements :before and :after under the hood and that messes up with flex display.

CleanShot 2022-06-14 at 10.29.02@2x

1 Like

I have done some testing now with custom code to remove :before and after without any effect to nav functionality and flex worked as expected. Did you try it before and are you aware of any problems after removing these pseudo elements?

.w-container:before, 
.w-container:after{
content: none
}