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.
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.
@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.
@@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.
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)
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 😬
@@jamiewp Totally agree. I watched your great AI vs Human video and one of the Tasks was to create a plugin that put it into Maintenance mode (which was a good example) but the fact that years on WP doesn't even have this simple feature is amazing. You can do lots of lovely shiny things with WP but the basics aren't there for many things and you need a plugin. I've just discovered blocksapp whihc is a Mac web design program and for creating simple (or maybe to so simple sites) it looks great. It's only Mac software but on first look it's great.
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.
Thanks Jon, good to be back - you'll also find me over on the WordPress.org official channel as well th-cam.com/users/live6lBIkf3xNDw?si=dMX0mcDY9rxECDkJ - just in case you didn't see the news make.wordpress.org/project/2024/08/19/ramping-up-wordpress-on-youtube/
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.
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.
Thumbs up and a comment for Dave! Frankly, the mobile/desktop menu issue is HUGE for WP. I use multiple tiers for our menus and it's extremely cumbersome for mobile menus because there's no hover state for your finger. What it desperately needs is tap-state awareness and twirldowns that are designed in an intuitive way. For example, if I have a tiered Menu with these items: A B C D E (Parent level - tier 1) But let's look at B as the example for a dropdown. At Tier2, you would have the items BA BB BC BD BE. (Child level - tier 2) And at Tier3, you would have BA open up to BAA BAB BAC, while BB would open up to BBA BBB BBC. (SubChild level - tier 3) Vertically then, this would look like: A B C D E And you would tap B to look like: A B >BA >BB >BC >BD >BE C D E Then you would tap maybe BA and it would open to: A B >BA >>BAA >>BAB >>BAC >BB >BC >BD >BE C D E So there's a few problems in here. For starters, with a desktop menu structure, it's not uncommon to make the top items open under Hover states, but still have a click-thru URL to content for that parent item. But with mobile, there's no hover state, so if there's a click-thru URL, there's no easy way to open the lower tier items because you get whisked away to the URL for the click-thru target page. Instead, you would want to have awareness of some sort that works with mobile tapping (ie lower precision clicking), perhaps enabling the default action to being opening the lower tiers, then if the lower tiers are open, a subsequent tap would take you through to the click-thru URL. This can't be all that complicated to implement through core WP functionality.
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.
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!
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?
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. 👍
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.
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
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
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.
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!
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?
@@jamiewp i just find out that once I downgrade the Wordpress to the previous version, the problem was solved.😂I was struggling with this problem for several weeks!!... 🧡Still thank you very much for your reply!! Your plugin is amazing and works really well.
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.
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.
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.
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 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 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).
Invaluable!
Thank you 🙏
So glad to see you back releasing videos. Thank you for your efforts.
Thanks Bradley
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.
Good point - hopefully Dave will add that functionality
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.
@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.
The other day I got stuck with creating a site for a client because of this. Thank you so much! Another vote from me.
Gread to hear it was useful 👍
@@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.
Dave Smith - please make this part of Wordpress! Thank you Jamie.
Tks - I’ll pass on your message 👍
@@jamiewp I actually used this tip right away and upgraded my company website. Perfect timing, Jamie. More treats for the cats!!!😻
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)
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 😬
@@jamiewp Totally agree. I watched your great AI vs Human video and one of the Tasks was to create a plugin that put it into Maintenance mode (which was a good example) but the fact that years on WP doesn't even have this simple feature is amazing. You can do lots of lovely shiny things with WP but the basics aren't there for many things and you need a plugin. I've just discovered blocksapp whihc is a Mac web design program and for creating simple (or maybe to so simple sites) it looks great. It's only Mac software but on first look it's great.
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.
👍
Awesome Jamie, ofcourse this could be a great upgrade in new versions! Have a nice one!
Thanks Jonathan
Great to see you back doing these kind of tutorials Jamie!
Thanks Jon, good to be back - you'll also find me over on the WordPress.org official channel as well th-cam.com/users/live6lBIkf3xNDw?si=dMX0mcDY9rxECDkJ - just in case you didn't see the news make.wordpress.org/project/2024/08/19/ramping-up-wordpress-on-youtube/
Another great video. Yes, please, add to core.
thanks Paul - i'll pass it on :)
These short videos packed with information are the best!
Thank you 🙏
Long time no see. I missed your videos about wp. They are one of a kind. Best in this niche
Thank you - i'm back now
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.
Thank you - and i agree, it's really time core got up to speed asap
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.
100% agree Tom...there is work to be done 👍
Thumbs up and a comment for Dave!
Frankly, the mobile/desktop menu issue is HUGE for WP.
I use multiple tiers for our menus and it's extremely cumbersome for mobile menus because there's no hover state for your finger.
What it desperately needs is tap-state awareness and twirldowns that are designed in an intuitive way.
For example, if I have a tiered Menu with these items: A B C D E (Parent level - tier 1)
But let's look at B as the example for a dropdown. At Tier2, you would have the items BA BB BC BD BE. (Child level - tier 2)
And at Tier3, you would have BA open up to BAA BAB BAC, while BB would open up to BBA BBB BBC. (SubChild level - tier 3)
Vertically then, this would look like:
A
B
C
D
E
And you would tap B to look like:
A
B
>BA
>BB
>BC
>BD
>BE
C
D
E
Then you would tap maybe BA and it would open to:
A
B
>BA
>>BAA
>>BAB
>>BAC
>BB
>BC
>BD
>BE
C
D
E
So there's a few problems in here.
For starters, with a desktop menu structure, it's not uncommon to make the top items open under Hover states, but still have a click-thru URL to content for that parent item.
But with mobile, there's no hover state, so if there's a click-thru URL, there's no easy way to open the lower tier items because you get whisked away to the URL for the click-thru target page.
Instead, you would want to have awareness of some sort that works with mobile tapping (ie lower precision clicking), perhaps enabling the default action to being opening the lower tiers, then if the lower tiers are open, a subsequent tap would take you through to the click-thru URL. This can't be all that complicated to implement through core WP functionality.
Yes! This is needed!
Make it part of Core. Very useful! Thank you!
Thanks Mario
Definitely wanting to see this in the core Gutenberg. And Jamie, we have been missing your videos on this channel. Thanks 🙏
Thank you 🙏 I'm back now, and have some stories to tell :)
Wow, just what i was waiting for, awesome, thank you!
Great to hear ❤
We are missing your videos. Please keep creating them!
Will do 👍
Definitely want to see this in core!
Thanks Jeremy
Really good content!
Brilliant ❤ Yes start mixing the batter
👍
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.
Yes I would love to see some of these make it to core soon 👍
Nice for a core option :)
Watch this space 👀
@@jamiewp I thought I hit the subscribe button ages ago, but your message made me realize somehow I did not. I fixed it directly ;)
@@Mathijsvanderbeek lovely and thank you 🤩
Yes. Didn’t even need to see the video. Make it part of core!
100%
Jamie, thank you so much for this video. I would definitely like to see this in core.
thanks Jon, noted!
Very practical alternative, good work Dave, thanks Jamie.
Glad it was useful
Thank you. Much appreciated. I'd tried to keep this super simple and devoid of too many bells and whistles or unwanted complexity.
Yep, should be part of core 👍🏻
noted !
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!
Thanks , and thanks for your perspective 👍
@Josegonzalez-gv4ws good point
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?
Essential 👍
Yes, please! Absolutely necessary to integrate this feature in core.
thanks Gabriel!
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. 👍
I agree that using Block Visibility would give you far more customisation options, especially for more advanced use cases.
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.
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
Nice touch Jamie - is there a setting to set the break point to configure when the mobile menu kicks in ?
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.
Actually THERE IS 😃 I cover it in my full video th-cam.com/video/R5kzAaEsDMg/w-d-xo.html
It's under Settings -> Responsive Navigation.
@@DaveOnWP 👀🔥
Yes, please. Thanks Jamie. ❤
👍👍
Hi Jamie, is it normal that opening the meno on mobile hides the complete page and what can be done to change that behaviour?
It'd be great if it could become part of core wordpress 👍
I tend to agree - or at least become a canonical plugin - I'll try to explain what those are one day 😬
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
This is great. But when I tried to install this plugin, I got an "untested with the latest wp version warning" .. will this matter?
It should be fine - test on a staging server ideally
@@jamiewp Thanks!
Always expect to see your cat with a tin of peaches landing on its head.
They're pretty quick 🐈 I need to make some more treat videos actually.
This would be great to have in core!
Roger that Daniel 👍
ok great video, but whats going on at Wordpress with this Matt guy?
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
Ok thanks for the feedback - i'll try to put together a beginners Menu tutorial - would that be helpful?
@@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
I second this!
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.
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!
Are you in the site editor? You need to add the Blocks.
@@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
@@WilserAriasSalas yup that's likely the issue
Yes - bake it in!!
👍
Hey Dave! Core it!
Nice, but what about breakpoints?
You can't see those - it inherits the default ones.
Os a great feature to have included
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?
Great!
Cheers and thank you for watching 🙏
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?
Great idea
I think this would be useful.
Thanks Eric
What if the mobile menu just cannot work on safari? Both on mac and iphone. But it works well on chrome.
What version of safari are you using?
@@jamiewp i just find out that once I downgrade the Wordpress to the previous version, the problem was solved.😂I was struggling with this problem for several weeks!!... 🧡Still thank you very much for your reply!! Your plugin is amazing and works really well.
Can we make cover page clickable if yes the please guide me.
Here you go :) th-cam.com/video/yBA8x3qL32M/w-d-xo.htmlsi=oiEwFyFkQ_6MdKtA
@@jamiewp thank you very much for guiding
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.
Yes! Yes! Yes!
Noted Kurt 👍
Gutenberg lacks tiny mandatory features like this.
Yup, but you want it right?
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.
You can style the background colors and text colors , but for now you would need some custom css for things like alignment etc
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.
Yes please, please add Mobile menu into WordPress Core.
Noted Christopher 👍
Not clear to me how wordpress decides when it should display which
😀
Well let me think abo.... M mm mm..... YES!!!!
hehe ok 👍
how to use responsive navigation block in elementor ?? *This does not work in Elemantor FREE version..
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.
Fancy coming on a speed build with that stack Mark 😉
@@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.
@@MarkConstable when you are ready lemme know 👍
core please
Noted !
Bring it to core please…
👍
Creating different menus with the same links in the same section is a very bad idea. (for SEO results)
Can you expand a little?
@@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).
Yesplease
I'll tell Dave 😉 (he's part of core development team)
Everything belongs to Wordpress core….