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?
hi @sigurdur130 there is simple solution and as you see flex can be sometime a bit tricky when you starting with this beast. 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).
@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.
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.
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 .
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
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?