WordPress Mobile Menus Fixed in 3 Minutes!

[@smaxnelson]

Invaluable!

[@jamiewp]

Thank you 🙏

[@bradleymoore175]

So glad to see you back releasing videos. Thank you for your efforts.

[@jamiewp]

Thanks Bradley

[@bogdanmigulski3729]

These short videos packed with information are the best!

[@jamiewp]

Thank you 🙏

[@tomxygen5963]

This is a good start but I think there are some improvements that could be done, both to the navigation and to the entire header. Regarding the navigation block on mobile, I'd love to be able to decide wether the overlay menu takes over the entire page or drops down only by the necessary amount, just like on Elementor. Regarding the header in general, I'd like to be able to arrange elements in a different order on mobile and desktop. For example, on desktop I may have, from left to right: logo -> menu -> account -> mini cart On mobile I may have: hamburger menu -> logo -> account -> mini cart. And also, mega menu would be really great. There was some development a while ago but a part from a demo, I haven't seen anything else.

[@jamiewp]

100% agree Tom...there is work to be done 👍

[@derek-hanson]

Yes. Didn’t even need to see the video. Make it part of core!

[@jamiewp]

100%

[@aijokker]

Long time no see. I missed your videos about wp. They are one of a kind. Best in this niche

[@jamiewp]

Thank you - i'm back now

[@jonbloor8661]

Great to see you back doing these kind of tutorials Jamie!

[@jamiewp]

Thanks Jon, good to be back - you'll also find me over on the WordPress.org official channel as well kzbin.info6lBIkf3xNDw?si=dMX0mcDY9rxECDkJ - just in case you didn't see the news make.wordpress.org/project/2024/08/19/ramping-up-wordpress-on-youtube/

[@MettCurians]

Wow, just what i was waiting for, awesome, thank you!

[@jamiewp]

Great to hear ❤

[@MarioGZito]

We are missing your videos. Please keep creating them!

[@jamiewp]

Will do 👍

[@dennis_woo]

I was struggling to style the mobile version of the default navigation aka desktop navigation so what I did back then was to create my own mobile navigation at the bottom of the footer and using CSS to set the display to none when the viewport is desktop (users won't see it in the footer section) Then when on mobile viewport my own custom hamburger menu appears and upon clicking my custom made mobile navigation would slide in. Hopefully now or in future Wordpress would make it easy for us to customize the mobile navigation like how we could with the default desktop navigation.

[@blueedu4958]

use dual blocks/groups (one for each resolution) and selectively hide using "block visibility" plugin. that way you can have different menus and style them independently

[@visualmodo]

Really good content!

[@johnkentsf]

Brilliant ❤ Yes start mixing the batter

[@jamiewp]

👍

[@jonathanpalacios3108]

Awesome Jamie, ofcourse this could be a great upgrade in new versions! Have a nice one!

[@jamiewp]

Thanks Jonathan

[@thewebstylist]

Amazing this ability wasn’t built into Wordpress years ago. The Blocksy header styling options type of setup should’ve been the core WP type of setup also years ago. So disappointing when the world’s most popular web design platform is so behind in so many things. Thanks for great vids always.

[@jamiewp]

Thank you - and i agree, it's really time core got up to speed asap

[@ceateio]

That seems to be a great and simple plugin, but I believe that it absolutely shouldn't go into core. We need to set different priorities while remaining clean; using a different navigation on mobile isn't something 99% of sites need. Great video!

[@jamiewp]

Thanks , and thanks for your perspective 👍

[@jamiewp]

@Josegonzalez-gv4ws good point

[@DavePerth]

Nice touch Jamie - is there a setting to set the break point to configure when the mobile menu kicks in ?

[@jamiewp]

Nope ☹ You could do with some custom code, but no setting. Hopefully highlighting this will give it a renewed push. I'll do my best from my end.

[@DaveOnWP]

Actually THERE IS 😃 I cover it in my full video kzbin.info/www/bejne/iGbOq3SXeth3g8k It's under Settings -> Responsive Navigation.

[@jamiewp]

@@DaveOnWP 👀🔥

[@gabrielebrandhuber]

Yes, please! Absolutely necessary to integrate this feature in core.

[@jamiewp]

thanks Gabriel!

[@zonegraphique]

Very practical alternative, good work Dave, thanks Jamie.

[@jamiewp]

Glad it was useful

[@DaveOnWP]

Thank you. Much appreciated. I'd tried to keep this super simple and devoid of too many bells and whistles or unwanted complexity.

[@gookulgopan]

I was actually searching for this and found your video, we need this in core, also need features for changing color on hover, and change the mobile overlay background to an image.

[@jamiewp]

👍

[@jonsecrist]

Jamie, thank you so much for this video. I would definitely like to see this in core.

[@jamiewp]

thanks Jon, noted!

[@sergeserge5843]

Definitely wanting to see this in the core Gutenberg. And Jamie, we have been missing your videos on this channel. Thanks 🙏

[@jamiewp]

Thank you 🙏 I'm back now, and have some stories to tell :)

[@epaulfischer7360]

Another great video. Yes, please, add to core.

[@jamiewp]

thanks Paul - i'll pass it on :)

[@chinyong1]

I initially believed this was a core feature since I already see options to toggle mobile, tablet, and desktop views on and off. It turns out that I'm using the Spectra One theme, which allows this without any plugins. This definitely should be a core feature! Overall, I don't have many complaints about the Spectra One theme, but the mobile menu could be improved. It seems like all FSE themes tend to have a basic mobile menu, just plain text. I’d love to see something more customizable, like what Astra offers. Does anyone know of any FSE themes with a more flexible mobile menu?

[@CarlMadsen]

Dave Smith - please make this part of Wordpress! Thank you Jamie.

[@jamiewp]

Tks - I’ll pass on your message 👍

[@CarlMadsen]

@@jamiewp I actually used this tip right away and upgraded my company website. Perfect timing, Jamie. More treats for the cats!!!😻

[@stuartmorley6338]

It always amazes me what simple things aren't in Wordpress. You need plugins for everything. What could go wrong with lots of people writing loads of plugins of which a lot are inferior and clash with others. I need 40 plugins for my site and they are updated almost daily. So if the wordpress guys are listening then my advice is add the simple stuff. You can't even turn on the maintenance mode without a plugin. A friend told me that if Wordpress made cars then all would would get is a steering wheel, the rest would be extras :) (which you need to update every week and pay for each year)

[@jamiewp]

I think a better analogy is that WordPress is like a lightweight publishing engine and if you need extra stuff e.g Ecommerce, then you can plug that in. But I agree we should have this basic stuff in core by now 😬

[@Black1991Star]

Can you show me how you add icons (or full images) for menu items in your block theme? Is it possible to implement it without plugins

[@MarioGZito]

Make it part of Core. Very useful! Thank you!

[@jamiewp]

Thanks Mario

[@LolkeDijkstra]

Hi Jamie, is it normal that opening the meno on mobile hides the complete page and what can be done to change that behaviour?

[@DecimusBurton]

Nice to see you back... was so excited to see this... it doesn't do the really simple thing i want which is that on a mobile device any submenus gets collapsed...with an arrow to expand... just like in classic themes like my previous go to Astra Pro.

[@jamiewp]

Good point - hopefully Dave will add that functionality

[@DaveOnWP]

That sounds like something that should have been part of the Core block itself a while ago. It probably isn't a great fit for this Plugin, but I might try spinning up another Plugin to implement what you suggested.

[@DecimusBurton]

​@DaveOnWP a plugin to do that would be great. I've moved all my hobby sites to from Astra Pro Ollie. The biggest complaint we have had is unwieldy as sub-menus don't collapse. Yes this basic functionality should have been baked in. I'd say it's the biggest drawback to switching from a classic to block theme.

[@aksfintech]

I have wp website which contain a lot of pages (500+), with child pages as well. How to manage, see, and organise? Can you make video on this?

[@jamiewp]

Great idea

[@richmaniow]

Have to admit I don't understand the menu settings at all, I don't seem to have any control how the "mobile" menu looks or where it appears, i.e in editor it shows it on the left while viewing the site on chrome puts it in the middle, and the hamburger also looks too small so I'm not sure if this plugin will solve that? plus you'd have to remember to update each menu every time you add a page which could be an issue for me, memory like a ..? Either way WP need to really sort out the menu editing as still feels half-finished, the old "Menu" page which is still shown under "Appearances" doesn't seem to function at all now but is still there.

[@LjubomirTesic]

The other day I got stuck with creating a site for a client because of this. Thank you so much! Another vote from me.

[@jamiewp]

Gread to hear it was useful 👍

[@LjubomirTesic]

@@jamiewp One more question if it's not a problem. Header width is too large on mobile. In order to make headers of different widths for PC and mobile phone, I would have to make two headers? Then on each header to set different settings on which devices are displayed (hide on pc one and other hide on mobile). How would that affect SEO? Theme is Spectra One.

[@AaAa-je5eo]

Nice, but it is not Mobile Menus "fixed": 1.That little box that appears around 'Home' at 0:53, what is that and why does it appear on all Gutenberg sites in mobile menus? 2. Mobile menu Logo. Why in god's name is the logo not visible in the mobile menu on Gutenberg, STILL?

[@DenisonCarlosMS]

This should ALREADY be in the WordPress core, just like Mega Menu and the device responsiveness adjustment options. These are simple things, but they would make a HUGE difference in not having to use third-party plugins.

[@jamiewp]

Yes I would love to see some of these make it to core soon 👍

[@jeremyfairbrass]

Definitely want to see this in core!

[@jamiewp]

Thanks Jeremy

[@diygenesis]

Yes, please. Thanks Jamie. ❤

[@jamiewp]

👍👍

[@Garyy23]

I am all new to this world building website. And i am doing my best. Therefore i would love to ask for you guys' help. I am getting and error when switching between desktop and mobile menu in dokument overview "The editor has encountered an unexpected error." I can then Copy Post text and Copy error. I do not know what to do, and why i am getting this error.

[@WilserAriasSalas]

After installing the plug in I can't even see the blocks in list view when editing the pages in WordPress editor, could this be a bug ? I really need this feature!

[@jamiewp]

Are you in the site editor? You need to add the Blocks.

[@WilserAriasSalas]

@@jamiewp thanks for replying. My theme is edited with elementor maybe that's the thing, because default wordpress editor won't let me add new blocks

[@jamiewp]

@@WilserAriasSalas yup that's likely the issue

[@tsxpneo]

Nice, but what about breakpoints?

[@jamiewp]

You can't see those - it inherits the default ones.

[@anantpandey231]

Can we make cover page clickable if yes the please guide me.

[@jamiewp]

Here you go :) kzbin.info/www/bejne/r3OkaatpprFmaK8si=oiEwFyFkQ_6MdKtA

[@anantpandey231]

@@jamiewp thank you very much for guiding

[@blueedu4958]

I actually do this by grouping and hiding depending on device. That way I can have the plain menu plus a big CTA fancy button on desktop and another menu for mobile (otherwise the CTA would be outside the mobile menu). Using just stock, the best way is using a free plugin like block visibility (which is great), that I learned about in this channel. Kudos to you 🙂 Also, when using additional blocks plugins (like greenshift or others), one can use a sliding panel rather than the standard overlay, which gives more customization options. But great plugin nonetheless and yes, should be part of the core. 👍

[@DaveOnWP]

I agree that using Block Visibility would give you far more customisation options, especially for more advanced use cases.

[@localppc242]

ok great video, but whats going on at Wordpress with this Matt guy?

[@Mikepfive]

Essential 👍

[@danielcanup5715]

This would be great to have in core!

[@jamiewp]

Roger that Daniel 👍

[@paulbacon5056]

Always expect to see your cat with a tin of peaches landing on its head.

[@jamiewp]

They're pretty quick 🐈 I need to make some more treat videos actually.

[@yubarahamani1115]

I really love your tutorial but for beginners like us its hurt when you skip 2:16 time code some of the process example you kipped the process of creating the mobile menus and when straight in editing the name

[@jamiewp]

Ok thanks for the feedback - i'll try to put together a beginners Menu tutorial - would that be helpful?

[@yubarahamani1115]

@@jamiewp Yes please, I would be very happy to see a beginners Menu tutorial. I think that would be very helpful. thank you for the reply

[@Mathijsvanderbeek]

Nice for a core option :)

[@jamiewp]

Watch this space 👀

[@Mathijsvanderbeek]

@@jamiewp I thought I hit the subscribe button ages ago, but your message made me realize somehow I did not. I fixed it directly ;)

[@jamiewp]

@@Mathijsvanderbeek lovely and thank you 🤩

[@spitsparrow]

Is there anyway at all to style the mobile menu PAGE? as most builders do. All we get to choose is the colour of the background and text and some alignment. What if you want a logo on there or some other text blocks or buttons in there. It would be great to style the mobile menu as a page. It just feels so limiting compared to builders. The mobile experience for ALL these builders should be the number 1 priority, How many people visit sites with mobile first.

[@jamiewp]

You can style the background colors and text colors , but for now you would need some custom css for things like alignment etc

[@PaweK-do3zo]

The menu in wordpress is the most disappointing. Something as crucial as menus should have been solved a long time ago. Mobile menus impose a ton of limitations especially when dealing with multi-level menus. Not to mention the sub-menu dropdown animation. The menu is the element that effectively stops me from doing projects on gutenberg.

[@LolkeDijkstra]

Not clear to me how wordpress decides when it should display which

[@nasirhaidary]

Great!

[@jamiewp]

Cheers and thank you for watching 🙏

[@SteffenRohr]

It'd be great if it could become part of core wordpress 👍

[@jamiewp]

I tend to agree - or at least become a canonical plugin - I'll try to explain what those are one day 😬

[@ConstyNash]

Yes - bake it in!!

[@jamiewp]

👍

[@SitWithAnkit]

Gutenberg lacks tiny mandatory features like this.

[@jamiewp]

Yup, but you want it right?

[@bildwerck]

Yep, should be part of core 👍🏻

[@jamiewp]

noted !

[@okanime1]

Hey Dave! Core it!

[@Domingos_Ferros]

Os a great feature to have included

[@EricThomson]

I think this would be useful.

[@jamiewp]

Thanks Eric

[@acprinte1]

core please

[@jamiewp]

Noted !

[@christopherwells7295]

Yes please, please add Mobile menu into WordPress Core.

[@jamiewp]

Noted Christopher 👍

[@kurtschlatzer]

Yes! Yes! Yes!

[@jamiewp]

Noted Kurt 👍

[@Black1991Star]

Creating different menus with the same links in the same section is a very bad idea. (for SEO results)

[@jamiewp]

Can you expand a little?

[@Black1991Star]

@@jamiewp You repeat the same words that are part of the link but they are hidden by styles. You put in fact dispalay:none; on the specified medea permissions .... It's called overspam (I don't know how it sounds properly in English.) I'm not kidding, this is a real problem. You can test your clients' sites for example with SEO Frog and you will see that it will be highlighted as an error. (from the seo point of view).

[@Hebhansen]

Bring it to core please…

[@jamiewp]

👍

[@MarkConstable]

You mean... this obvious functionality exists and is NOT already in core! With antipatterns like this, it's no wonder that I am spending more and more time with Laravel.

[@jamiewp]

Fancy coming on a speed build with that stack Mark 😉

[@MarkConstable]

@@jamiewp Sure, but not in 2024. I need more time to up my emerging Laravel skill set. I am very impressed with what other people are building, and maybe a really decent blog/cms plugin will emerge.

[@jamiewp]

@@MarkConstable when you are ready lemme know 👍

[@lebonron]

Well let me think abo.... M mm mm..... YES!!!!

[@jamiewp]

hehe ok 👍

[@gerdakasselman3411]

😀

[@KaiBuskirk]

Everything belongs to Wordpress core….

[@justinpatterson1326]

Yesplease

[@jamiewp]

I'll tell Dave 😉 (he's part of core development team)