Navbar will not flex... anything!?

[Martin_DSGNLAB (Martin Bodger)]

I’ve been trying to get this simple element to just behave but no matter which way I push it or re-order the elements, nothing happens.

I drop a nav element in, I set it to fill the width of the screen (barring some padding either side.)

I then ask the Nav Element to have it’s children elements (Brand, nav button and the like.) flex to space-between and for god knows what reason… it centers everything with this non-existent padding on either side that doesn’t show anywhere in the style menu.

Can someone please explain this, I’m losing my hair over it.

[WebDev_Brandon (Brandon Mosco)]

Please share your project.

[rileyrichter (Ben Parker)]

Hi, @Martin_DSGNLAB!

So sorry for any frustration you’re experiencing. I’ll echo, @WebDev_Brandon here.

Which project are you specifically having issues with? Can you share your read-only link with me so I can jump in and investigate?

[Port_of_Folio]

The native nav bar has a “nav menu” inside of it, which is set to float right. This is probably what’s causing your issues when trying to “flex” things into position.

That’s my guess, not knowing what your project looks like. Need to share access to the project.

[Martin_DSGNLAB (Martin Bodger)]

I’ve had to cancel using it due to time constraints.

However this bug is easily emulated by trying to use a Navbar and Flex Boxing the contents using Space Between. The Brand and Menu Button element won’t go to the edges, instead will arrange the elements to the middle with equal spacing across all elements.

[miekwave (miek)]

@Martin_DSGNLAB
This is resolved by moving nav container elements into a seperate div block, and deleting the original container div, you can then flex anything in navbar. share screenshots or sandbox sharelink and we’ll show you exactly what its is.

[Port_of_Folio]

The “nav menu” element natively has a float right setting applied to it. If you remove the float right property, the elements will respond the way you’ve requested.