I am trying to understand the basics of how to place my elements. I’ve watched and re-watched a lot of videos on the subject, including the ones from Webflow University (“21 day design portfolio course”), whose “exercises” I’m redoing. I understand the logic.
But when it comes to my design and experimenting, everything gets complicated, even for doing things that are often way much simpler (!).
For example: I have a navigation composed like this
section
navbar
container
brand (with logo inside)
menu (with 4 links inside)
I apply flexbox to my container and I justify on the left (because i don’t want to center)
How do I get my menu to be right justified?
There are no separate justification settings for my two flex children (brand + menu) that would allow me to do this.
In the webflow flex video, it is said that “Properties are set to the parent element”.
To sum up, there are so many parameters for each element at each level (and all dependent on each other) that the seemingly simple logic I see in the tutorials is made complex by all the choices I have in reality!
Controlling the size and position parameters is really complex for me (not to mention, yet, responsiveness!).
The native navigation component can be confusing because Webflow has some styling built in. The Brand element and Nav Menu element have a native float property applied. This ends up conflicting with flex box settings of the parent. Try removing the flex box setting on the parent first. Then remove these two float settings. Then go back and set your flex box property on the parent. I recommend using a replacement for their native “container” element or move the Brand, Nav Menu, and Menu Button elements out of the container, making the Nav Bar element their new direct parent.
Thanks again for your help.
You recommend not to use native elements such as container, nav menu and brand anymore, because of these preset settings, and to use a generic div instead?
You already helped me about section and container elements (!) for the same reasons (native Webflow presets).
At the moment, I haven’t learned the float properties, and I was just planning to look into the position settings that I haven’t covered yet! This is one of my priorities, as well as understanding which units to use and in which cases (px, rem, …)
I’ll usually keep the native Nav elements but move everything out of the “container” element, and then delete it. And then remove the floats from the Brand and Nav-Menu. That’s just my personal preference.
I still like the native nav on a standard page design because it has the automatic switching to mobile menu.
