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

🔔🔔🔔🔔 UPDATE: NEW RESPONSIVE NAVIGATION MENU PLUGIN 🔔🔔🔔🔔

There's now no need to implement this technique yourself. Just download the above Plugin and activate on your site and you will have two new blocks available for:

- Mobile Navigation
- Desktop Navigation

---------------------

I show you how you can display a different menu on "mobile" than you on "desktop" using the Navigation block in WordPress 5.9 full site editing.

This requires some CSS which I have left below:

/* CUSTOM RULES */

@media ( min-width: 782px ) {
display: none;
}
}

@media ( max-width: 781px ) {
display: none;
}
}

[DaveOnWP]

🔔🔔🔔🔔 NEW RESPONSIVE NAVIGATION MENU PLUGIN 🔔🔔🔔🔔


I released a Plugin that implements this technique without the need for custom CSS. Just install and activate.

[susantau]

Your brilliant explanation of how to break out and style differently two navigation menus is an enormous gift to me. Thank you!!

[laursellis]

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

[songs_i_like]

Thank you for this tutorial! Was able to customize which navigation to show at a given screen size (I wanted the mobile / hamburger menu to show for "tablet" size too).

[costdev]

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

[jeosbeavadra]

Thank so much. Exactly what I was looking for. It's perfect

[LeftyMurph]

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.

[dave_spa]

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.

[ToMore]

Thank you! Solved my issues perfectly!

[marcrosenberger]

Thank You! Great video for Wordpress mobile menu!

[MaryAnnAschenbrenner]

Thank you for this video. I followed your directions and added mobile menu, etc. The CSS worked just find for hiding the desktop menu on cell phones. However, the mobile hamburger menu continues to show on desktop. What am I missing here?

[acidboy]

Man! Thanks sooo much!... do you have any idea on how to get that hamberger menu bigger?

[clgoldenwebcode]

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.

[codeAlongwith]

It would be great if you could show how we might add javascript and css effects in both coding and with a plugin (if necessary).

[Arcro]

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?

[shropshireschafe]

Great tutorial! Is it possible to create also a dropdown menu for the mobile menu?

[ddrci]

Hey thanks for the tutorials, I want to developed Gutenberg blocks but I couldn’t find any up to date tutorials on YouTube. Could you please advise me on that ? Do I need to learn first redux and react jsx ? Or any tutorial can you suggest me ? Thanks a lot

[HaifengZhu-pnuq]

please make tutorial on how to make collapsible mobile menu

[KhalilCh]

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

[DaveOnWP]

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?