Navbar in mobile/tablet view

I’m having trouble with the menu. It was working as it should but something happened and now it doesn’t open like before.

Instead of the items in the menu opening one under the other they appear side by side when clicking on the mobile navbar.

Also the white space increases in size a little at the bottom when opening menu in mobile view.

https://preview.webflow.com/preview/advocati?preview=f4e6f638a6733f24c955532f52ed0be5

thank you!

Hey there!

To stop the menu links from appearing side by side on tablet and below:

-select the tablet viewport
-double click on the header, then use the open menu button in the settings tab
-select a nav link, and shut off “float left” (as shown below, notice the float: none; that I set)

Explanation: When float is on all elements will only take up as much room as they need rather than the entire width. So you want float: left on for desktop view so they all appear in one line, but on mobile displays shutting float: off will cause each menu link to appear on their own line.

PS: you can also remove the 16 pixels of margin on the bottom of the menu links on mobile to get rid of that whitespace.

Hope this helps :slight_smile:

Thank you so much!

of course it worked :smile:

I had tried that myself actually but for some strange reason while the menu looked right when I tried it in preview mode it wouldn’t load/open so I assumed I was doing something stupid :smile:

You’re welcome!

Awe haha, silly technology. Glad all is a-okay for you now :slight_smile:

Happy webflowing!

1 Like

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