FML: Multi-level dropdown menu's on mobile

Design help General
1

Hi guys! This is my first post here. I’m having an absolute nightmare around the menu for my first build.

I’m trying to create a multi-level sub menu. This is working okay for desktop. But I’ve ran into difficulties making it responsive. I can’t for the life of me work out what’s going wrong so if anyone can help to work out where I can start to fix my issue, it would be massively appreciated.

The current ‘bug’ or mistake I’ve made is that when viewing the menu on mobile and you open a dropdown, the links are moving erratically and it’s just a bit of a mess. I’ve tried to keep things pretty tight so far and I had it working, but whatever I’ve done has messed up my plan. This said, it previews fine in Webflow, but the published site shows the errors up.

Has anyone else come up with a easy way to make multi-level menus without the dropdown component because I’ve found it really poor to work with - however it is my first go so that may well be expected.

Thanks for any help,

Tom

Here is my site Read-Only:
(Webflow - Elite Skin Studio)

4

Hey Tom,

Your menu looks great on desktop but yes it would be difficult to translate that smoothly to mobile. Expect quite a few hours and learning how to work in expanded menus and debugging tools to get it right.

A lot of template designers resolve this by splitting the navs into two- a megamenu nav for desktop, and a simpler mobile menu for lower breakpoints.

It means maintaining two navs as the site grows but it resolves a lot of layout and complexity issues, and makes it easier to optimize the mobile UX.

If you want to battle through it, I’d go back to the original template design as a reference to figure out what change has broken the nav expansion.