Use a different MENU on MOBILE with the Navigation block in WORDPRESS block editor

please make tutorial on how to make collapsible mobile menu

Thank you for the advanced tips, Can we please change the svg for the burger menu? I need thicker lines I done my svg in illustrator, but I don't know how to replace them in wp, thanks again

Great video! In the introduction you showed the original menu and how it soon became unwieldy because of the nested sub-menus. Is there a way to keep the new menu (the one for small devices) collapsed when the menu button is clicked, and only to open when the first level menu-items are clicked?

Thanks, it was helpful.

This is exactly what I needed, thank you! And very straight to the point.

Is there a way to insert buttons inside the toggle mobile menu??

Thanks! This helped as I was struggling to make a menu with a centered logo in the middle. I resorted in making a left side menu and right side menu which are hidden and replaced by a mobile menu through media queries. It's not ideal but I tried before to accomplish it with php, css & html where the result was a hit or miss, depending on the amount of menu items. The block theme way gives more and easier control over the exact presentation.

Thanks for that. Under the display option in the site editor, you can choose to replace the hamburger icon by the word Menu. Is there a place you can change this to be more explicit for inexperienced users(e.g. Click here for options)

Amazing video!! I am struggling though. How can I change when the mobile overlay activates... I want my mobile overlay to come on at at screen widths less than 800px but I just can't figure out how to change it :(

This is great, Dave. I'm so glad to have this as an option until block theme editing matures. Question: why put two dashes in the class names? I was under the impression I should avoid that so as not to conflict with the custom variable markup.

Great video, thanks Dave!

In my testing, both menus are hidden from 782px-783px - The second media query, `(max-width: 783px)`, should be 781px.

That way:
- The mobile nav is hidden from 782px and larger
- The desktop nav is hidden from 781px and smaller

Two menus not the good way to make it actually you repeating yourself

Truly good content!

quality themes like kadence have had primary and mobile menus for a couple years now, I'm excited to try the navigation block for things like sub menus on different sections of a website.

I appreciate this video was a little long, but achieving this requires a bit more of a deep dive. Did it work for you? Anything I missed?