Flexbox space between option is bugging in Webflow when the flex element is the Webflow Navbar or a Webflow Container. Bug exists since the launch of flexbox.
If you add a div in the navbar element, then put everything inside of this div, make the div width 100%, and make it flex+in between, it will work.
Merci, @vincent. Ça marche maintenant.
@vincent There is a new problem now.
The nav-bar moved a few pixels up. I don’t know why. There’s no margin or padding applied either.
That is expected actually. If you can enlarge your screen a bit you’ll see that your search field is forced under the rest, which is making everything go up because there’s a fixed height involved somewhere up.
So the solution is a design solution: either you make your content fit within the smallest possible viewport for the desktop view, or you address the 2 lines of elements situation with a variable height for the parents.
This is the live site. Nothing moves up and elements seamlessly wrap. Check it out: https://www.om-lubes.co.uk/
But in the designer, after I added the div or some link-blocks for the tablet and mobile. The elements have mysteriously moved-up. See logo, for example.
No element in the nav-bar has a fixed height.
The problem is something else.
Hoping Webflow fixes this regularly occurring bug.
Facepalm. So glad there was a workaround. This is embarrassing, Webflow!
Oh my word this was really annoying. Thank you for the fix. Hopefully the fix is unnecessary in the future.
There is still a bug, I’ve just tested myself by creating simple nav using vscode HTML CSS and then comparing to webflow, when you apply space-between it’s not going to move elements to the edge of the container, it’s going to have that weird huge space on the left and right. Webflow fix the bug.
This is still broken!! So frustrating
Howdy all. Quick note that the Webflow
Container element is a “non-ordinary” node, which means it has
:after pseudo elements inside. These also get counted when the user applies flex settings. (Same for the
Navbar container.) In other words, this is expected behavior and not a bug.
You have two options to fix:
- As @vincent suggested, just throw an extra
div inside your
Container, and apply flex to that
- For the children inside the
Container, you can apply
Last to the corresponding children, and this will remove the extra unnecessary space on either side of those elements. See included image below: