Dropdown menu in navbar only works on mobile breakpoint when nav menu set to "show"

Design help General
1

Hi All

I’m having an issue getting a dropdown menu to work correctly when used within a navbar in all of the breakpoints smaller than desktop.

What I want in mobile breakpoint is for the drop down menu to provide sub-menu options to the left of the dropdown menu.

Strangely, dropdown works fine when I have the nav bar menu set to “show”, but as soon as I publish and try it live it doesn’t work.

Here’s a gif of the issue. The first example is what I want to happen. The second, is what I get when I try to publish.


Dropdown issue - Watch Video

Here’s link to the read-only of my page.

Would really appreciate help on this.

Thanks!

2

You might need to try, in the settings panel of the menu, setting the menu type to “drop down” rather than “over right” as it looks like in the designer you have a dropdown type, but it’s displaying as an “over right” menu instead.

You’ll need to play with sizing etc, but hopefully that might help!

3

I did try that. What that did is it turned the whole menu into a new dropdown. The option wasn’t specifically available for the dropdown within the menu. Here’s what it looked like.

image

I did eventually find a solution that was acceptable though. Not exactly what I was looking for, but good enough for now.

I just got rid of the offset from the absolute positioning, and instead added padding to make the submenu indent a little below the dropdown. Here’s what it ended up looking like.


No name - 14 January 2024 - Watch Video

here’s link to read-only in case anyone has same problem and wants to copy what I did.