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

[@DaveOnWP]

🔔🔔🔔🔔 NEW RESPONSIVE NAVIGATION MENU PLUGIN 🔔🔔🔔🔔 ⬇wordpress.org/plugins/getdave-responsive-navigation-block/ I released a Plugin that implements this technique without the need for custom CSS. Just install and activate.

[@laursellis225]

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

[@DaveOnWP]

You are very welcome. I'm glad you found it useful.

[@costdev3438]

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

[@DaveOnWP]

Thanks @costdev. You are absolutely correct. My mistake. It seemed to work in my testing but I guess I go the media queries wrong. I'll update the sample code to reflect that. Much appreciated!

[@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).

[@DaveOnWP]

Glad it helped!

[@DaveOnWP]

I have a new video about this technique which uses a Plugin to drastically simplify the process. kzbin.info/www/bejne/iGbOq3SXeth3g8k

[@jeosbeavadra9270]

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

[@DaveOnWP]

You're very welcome. I appreciate you letting me know.

[@To25More]

Thank you! Solved my issues perfectly!

[@DaveOnWP]

You are very welcome. Glad it helped!

[@DaveOnWP]

I have a Plugin which now implements this feature. You can check it out in my latest video: kzbin.info/www/bejne/iGbOq3SXeth3g8k

[@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.

[@DaveOnWP]

Hey David. Great to hear this was useful to you! I plan on bringing out a follow up to this in the near future so do subscribe to be the first to find out about it. The Navigation block hasn't advanced too much in WordPress 6.0 but there's been a tonne of other cool features. You might want to check our my 4 min video which covers (nearly) everything you will need to know: kzbin.info/www/bejne/ZmrEl5mapsxjY6c All the best

[@marcrosenberger7973]

Thank You! Great video for Wordpress mobile menu!

[@DaveOnWP]

You are welcome!

[@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.

[@DaveOnWP]

Absolutely. Imagine though that in the near future any Theme will have this ability. Good to hear you’re going to give the block a spin.

[@ReflectionRetreat]

amazing man! thank you so much.

[@DaveOnWP]

You're very welcome. Glad it helped you out!

[@visualmodo]

Truly good content!

[@DaveOnWP]

Thank you. Glad you found it useful!

[@clgoldenwebcode7220]

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.

[@DaveOnWP]

I'm pleased it was helpful! Good question about the double dashes in the classname. Honestly it's just my own personal preference. I don't believe it would cause any technical conflicts with the custom variable syntax but you might prefer to simply use `is-mobile` or `is-desktop` and target those instead.

[@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?

[@pixolin]

Yay! It works. 🎉

[@sohils2012]

Thanks, it was helpful.

[@DaveOnWP]

You are very welcome. I'm glad it helped and thank you for taking time to provide feedback 🙇 You might also be interested in seeing what new features landed in WordPress 6.1 which was released for download on Nov 1st 2022 (2 days ago!) - kzbin.info/www/bejne/Zp64o6qvrtxgbqs&themeRefresh=1 Or if you want specific info on the upgrades to th eNav block in WP 6.1 you might like to watch - kzbin.info/www/bejne/a6DZpax_rquCpaM

[@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).

[@DaveOnWP]

Yes this is a good idea for a follow up video as it can be extremely confusing. I'll add it to my list of possible videos.

[@Arcro266]

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?

[@DaveOnWP]

Thanks. I'm glad you found it useful. Unfortunately there isn't currently a way to achieve what you are asking but I feel there should be. How would you feel about raising an Issue on the Github repository to explain the feature you'd like to see? github.com/WordPress/gutenberg/issues/new/choose I'd love for you to drop the link here in a reply and I'll be sure to get it labelled and triaged accordingly.

[@acidboy2128]

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

[@DaveOnWP]

You are very welcome. You would have to add custom CSS for that one as there isn't a way to do that via the interface yet. To do this: - click the "Styles" icon button in the top right hand corner of the editor/ - in the sidebar that pops up in the right hand side click "Additional CSS". - paste the following CSS into that box (adjusting the pixel values as required): .wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-open svg { height: 64px; width: 64px; } I believe that should work in both the editor and the front of site. You could also just add the same CSS to a stylesheet enqueued by a Theme or Plugin rather than using the "Additional CSS" area. I hope that helps.

[@noorflake]

hi...might be a simple question but...how do you open the css code of your theme ? very clear video tho ty

[@DaveOnWP]

You can actually avoid editing the Theme file. - Go to Site Editor - Look in top right for "Styles" icon - click on it. - Styles panel will open. - Click on "Additional CSS" - Paste in the CSS code from this tutorial video. - Save your site I am working on making this whole process a lot easier. Subscribe to the channel for an update coming soon!

[@shropshireschafe]

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

[@DaveOnWP]

Thank you. I'm glad it helped. I'd love to understand more about your question about a "dropdown menu". Is it that you'd like to be able to have the submenu items hidden within the mobile menu and then you can toggle them to expand them? Or is it something else? I'd love to be able to help. Please do let me know.

[@shropshireschafe]

⁠​⁠​⁠​⁠​⁠@@DaveOnWPThank you for your response! Precisely, I am searching for a mobile submenu design where the options are initially hidden. These would be expandable upon toggling.

[@DaveOnWP]

@@shropshireschafe That will be something you should be able to achieve once we land the work to enable you to fully customise the mobile "overlay". github.com/WordPress/gutenberg/pull/55657

[@ddrci88]

Hey thanks for the tutorials , I want to developed Gutenberg blocks but I couldn’t find any up to date tutorials on KZbin. 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

[@DaveOnWP]

Hi there. You are very welcome! It's great you are thinking of developing Gutenberg blocks. I would recommend taking a look at the official learn.wordpress.org website where the WordPress project is steadily building up a wealth of video tutorials on all topics related to Gutenberg. In particular, I'd suggest reviewing the course "Intro to block development" which should give you a solid foundation upon which to build. learn.wordpress.org/workshop/intro-to-gutenberg-block-development/ If you aren't comfortable with JavaScript then you might find block building more tricky. I would suggest levelling up on that first perhaps with something like javascript.info/. There are also a lot of good courses by Pluralsight and others. I hope this is helpful and gets you on the way to building your first block!

[@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]

You are very welcome. There are better ways to solve this now as well. I'm due a video on how to access these! We definitely need to allow developers (at the very least!) to alter that icon. To that end I have proposed this new API to enable that. If/when that lands we should be able to hook it up with the Nav block. github.com/WordPress/gutenberg/issues/51563 If you are willing able to leave a comment in support of this it would be appreciated.

[@KhalilCh]

@@DaveOnWP Thank you for the replay, I found a php script that can do that, I will share it here if you don't mind

[@DaveOnWP]

You are welcome to share a link to a Gist or code hosted somewhere else. Posting the code in this comment probably won't provide the best experience though. I am curious as to what you've found.

[@heystenner]

Thanks so much!

[@DaveOnWP]

You're welcome!

[@woodyham1]

I've been looking to have different format on desktop and mobile. This is good. However, can I use it for alternative blocks? I have created two blocks - othersdesktop and othersmobile - but cannot work out what changes I need to make to your CSS code to make them work. Any other advice you can point me towards please?

[@DaveOnWP]

If you need more advanced functionality for other blocks I would be tempted to try out this Plugin: wordpress.org/plugins/block-visibility/ Nick is a great guy and very experienced contributor to WordPress.

[@kirstynicholson4484]

How do you get the mobile menu to not be a cross of page but a normal drop down?

[@DaveOnWP]

Thanks for your question. So I fully understand, you would like the mobile menu to be a drop down rather than a full screen overlay? Did I get that right?

[@kirstynicholson4484]

Yes that's right

[@kirstynicholson4484]

Do you know how I can do that?

[@DaveOnWP]

@@kirstynicholson4484 I'm afraid it's not currently possible without creating a custom block.

[@HaifengZhu-pn3uq]

please make tutorial on how to make collapsible mobile menu

[@DaveOnWP]

Hi there. When you say "collapsible" can I ask what you have in mind?

[@HaifengZhu-pn3uq]

@@DaveOnWP that means the menu can collapse and expand

[@camillajordan5795]

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)

[@DaveOnWP]

Hi Camilla. I've been away so sorry for the delay in responding here. Currently there is no way to customise this. I've raised an Issue in the Gutenberg Github repo to track the requirement. github.com/WordPress/gutenberg/issues/40580 Thank you again for the suggestion 🙇

[@dalerichardson4170]

I've copied everything you have done in the video and added the code in the description into the styles.css file but it doesn't work. Any ideas?

[@DaveOnWP]

Do you have the site online? I might be able to take a look. The setup is fairly laborious and I'm working on a few ways of making it bit easier.

[@dalerichardson4170]

@@DaveOnWP Hey Pal, thanks for the reply. I've installed Kadence blocks plugin which provides this option. In the video I couldn't quite see exactly which file to edit, I think that could have been my problem. I appreciate the response though :)

[@seosamhhome]

Hello Dave Please my mobile overlay menu does not open

[@DaveOnWP]

Hi there. Have you tried using a fresh install with no Plugins active? Does the Navigation block work for you there? Typically if the mobile menu is not working then the JavaScript isn't running which can be due to Plugin conflicts.

[@DaJungleDred]

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 :(

[@DaJungleDred]

I used your way but with the same menu - works perfectly actually - Thank you!!

[@DaveOnWP]

Glad this was helpful Simon. You should be able to change the CSS media query values to 800px and 799px respectively. Something like this should work: @media ( min-width: 800px ) { .wp-block-navigation.nav-primary--mobile { display: none; } } @media ( max-width: 799px ) { .wp-block-navigation.nav-primary--desktop { display: none; } }

[@DaJungleDred]

@@DaveOnWP Is there a way to override and take control the menu overlay and navigation ? I've searched and searched and found nothing. I can't even see what triggers the default overlay. Oh and this video was and is a total life saver thank you!!

[@RaphaelKavalan]

why does this shit doesnt exist as a default feature ffs

[@DaveOnWP]

Thanks for your comment. WordPress is a big project with many competing priorities. Core contributors are aware this is a desired feature and have been working on possible solutions. However, they have yet to arrive at a consensus. They are always looking for folks to contribute, so if you have time/ability I'm sure they would appreciate your input on the ticket, or even a polite request for this feature to be given some additional priority. github.com/WordPress/gutenberg/issues/43852 Thanks again for taking the time to comment.

[@ddrci88]

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

[@DaveOnWP]

Hi there. Thanks very much for your feedback. I completely appreciate that having two menus is suboptimal. Unfortunately, as I've tried to outline in the video, the Navigation block doesn't yet afford any alternative means of achieving the desired outcome. It is however, worth keeping an eye on the Github Issue for this and seeing if there are any developments that might provide us with the same functionality within the block itself The issue is: github.com/WordPress/gutenberg/issues/38201. Thanks again.

[@ClearChoiceMethodology]

Navigation is a mess in FSE. Whoever thought this new system was acceptable deserves to be fired. They had a good idea and butchered it completely. You can't collapse anything so if you have multiple submenu's it's a scrambled looking mess. On top of that there isn't a lot of efficiency in placement. It only semi works for a single navigation bar with no submenu's at all. They're not even close. I'm surprised it's been 2 years and they've done absolutely nothing to fix it and there are no plugins to clean it up either. Really disappointed in WP over this it's embarrassing they tried to pass it off as a more efficient way to create menu's. Some of the laziest work I have ever seen. I'll be using a collapsible menu I found as a plugin for FSE and abandoning the navigation menus completely. It's garbage and I won't use garbage. Anyone interested the plugin I am using is called accordion block lite. Not my favorite option but it's far better than what we were given as a "customizable navigation bar".