WordPress Mobile Menus Fixed in 3 Minutes!
Вставка
- Опубліковано 21 жов 2024
- In today's video I'll show you how to use a brand new FREE WORDPRESS PLUGIN to fix your WordPress Mobile Menus.
👉 Stay in touch with WordPress news: www.pootlepres...
👉 FREE THEMES www.pootlepres...
👉 Download the Free Plugin wordpress.org/...
👉 Follow Dave on UA-cam / @daveonwp
Create different menus for desktop and mobile in WordPress Block Themes in just 3 minutes! This tutorial solves a common frustration for WordPress users: the inability to have separate, customized menus for desktop and mobile devices in Block Themes.
Learn how to:
1. Install the free Responsive Navigation Block plugin
2. Create separate desktop and mobile menus with different items
3. Replace existing navigation with new responsive blocks
4. Style desktop and mobile menus independently
Currently, Block Themes offer limited flexibility in menu customization across devices. This tutorial shows you how to overcome this limitation, allowing you to optimize your site's navigation for both desktop and mobile users. You'll be able to tailor menu items and styles specifically for each device, enhancing user experience and site functionality.
Perfect for improving your site's usability on all screens. Like and comment to support adding this feature to WordPress core!
#WordPress #BlockThemes #WebDesign #ResponsiveDesign #WordPressNavigation
Invaluable!
Thank you 🙏
So glad to see you back releasing videos. Thank you for your efforts.
Thanks Bradley
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
Yes. Didn’t even need to see the video. Make it part of core!
100%
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 ua-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/
We are missing your videos. Please keep creating them!
Will do 👍
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.
Wow, just what i was waiting for, awesome, thank you!
Great to hear ❤
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 :)
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 👍
Brilliant ❤ Yes start mixing the batter
👍
Jamie, thank you so much for this video. I would definitely like to see this in core.
thanks Jon, noted!
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
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.
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.
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 👍
It can be part of core, but it does not mean it has to be turned on by default. You could easily turn it on, or add it to the editing canvas as per your requirements. It is a must -have feature.
@@Josegonzalez-gv4ws good point
Really good content!
Yes, please! Absolutely necessary to integrate this feature in core.
thanks Gabriel!
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 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.
Definitely want to see this in core!
Thanks Jeremy
Make it part of Core. Very useful! Thank you!
Thanks Mario
Awesome Jamie, ofcourse this could be a great upgrade in new versions! Have a nice one!
Thanks Jonathan
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 ua-cam.com/video/R5kzAaEsDMg/v-deo.html
It's under Settings -> Responsive Navigation.
@@DaveOnWP 👀🔥
Yes, please. Thanks Jamie. ❤
👍👍
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 😬
ok great video, but whats going on at Wordpress with this Matt guy?
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.
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?
Nice, but what about breakpoints?
You can't see those - it inherits the default ones.
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
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
You can use FA icons with classes.
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 👍
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 👍
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 🤩
Os a great feature to have included
Yes - bake it in!!
👍
Essential 👍
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?
I think this would be useful.
Thanks Eric
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.
Yep, should be part of core 👍🏻
noted !
Great!
Cheers and thank you for watching 🙏
Hey Dave! Core it!
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
Can we make cover page clickable if yes the please guide me.
Here you go :) ua-cam.com/video/yBA8x3qL32M/v-deo.htmlsi=oiEwFyFkQ_6MdKtA
@@jamiewp thank you very much for guiding
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 😬
Gutenberg lacks tiny mandatory features like this.
Yup, but you want it right?
Yes! Yes! Yes!
Noted Kurt 👍
Yes please, please add Mobile menu into WordPress Core.
Noted Christopher 👍
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
Well let me think abo.... M mm mm..... YES!!!!
hehe ok 👍
core please
Noted !
😀
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).
Bring it to core please…
👍
Everything belongs to Wordpress core….
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 👍