Flex layout displaying wrong

Hi guys,

I am having issues with 1 Flexbox - very odd. So I made a custom menu bar for my mobile version (I wanted to use a burger icon). So naturally, I hid the original menu from the mobile view - so far so good. I then built the mobile menu with burger menu, but when I hid it from all displays except mobile, the flexbox started acting crazy. Please take a look:

As you can see on the right in the flexbox settings, my 2 elements within the menu-div should be spread on left and right, but instead its putting them underneath each other?!
Seems very weird that this happened, once I hid the menu from other screens - to me, it doesn’t have any relationship.

https://preview.webflow.com/preview/oceanwhite?utm_source=oceanwhite&preview=f01361ebe2ca70e5a8ecaa7a888de836

Thanks!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Yep, avoid using the built in feature for hiding elements for certain devices when you’re using Flexbox. Instead, just use Display:none for the desired devices. Chances are this will fix your issue.

Hi Vincent. How do I do that? Can you help me out there?
Thanks!

Hi @Douglas_Fllrtn

Display: none is in your style panel right underneath the class name. You can switch between device breakpoints at the top of the Designer.
CloudApp

You can use that method rather than using these settings

Ah I see what you mean. Thanks!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.