Slide Out Mobile Menus for Elementor With No Plugin or Pop Ups
Vložit
- čas přidán 30. 07. 2024
- ✨ Join us in the Lytbox Academy Community:
lytboxacademy.com/join-us/
Link to the code snippets for Elementor Slide Out Menu 👇
lytboxacademy.com/slide-out-m...
/////
✨ Learn High-Level Web Design Skills With Me:
🟢 Master Elementor while learning web design skills:
lytboxacademy.com/design-with...
🟢 Learn powerful SEO in an easy-to-follow style for WordPress users and web designers:
lytboxacademy.com/seo-for-wor...
🟢 A step-by-step guide to building a WordPress Maintenance Business that results in high MRR:
lytboxacademy.com/maintenance...
🟢 Become a Lytbox Academy Pro Member:
lytboxacademy.com/the-academy/
/////
✨ My Recommended WordPress & Web Design Tools:
👉 The hosting I use:
Cloudways (use promo code LYTBOX for 30% off 3/months)
lytboxacademy.com/cloudways/
xCloud:
lytboxacademy.com/xcloud/
/////
👉 My WordPress Tools:
Elementor Pro:
lytboxacademy.com/elementor/
Breakdance Builder:
lytboxacademy.com/breakdance/
Bricks Builder:
lytboxacademy.com/bricks/
Crocoblock:
lytboxacademy.com/crocoblock/
SEOPress (the best SEO tool for WordPress!):
lytboxacademy.com/seopress
Perfmatters:
lytboxacademy.com/perfmatters
InstaWP:
lytboxacademy.com/instawp
WP Umbrella:
lytboxacademy.com/wp-umbrella
/////
⏰ Stamps
1:37 - Designing and Building Mobile Menus
13:21 - How to build a slide out menu without a plugin
19:32 - Adding a slide out menu with a plugin
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elementortutorial #elementorcontainers - Jak na to + styl
Great tutorial - I had a few issues when using option 1 within a website already created using sections rather than containers. My solution was to create the template as 'page' instead of a 'section' and within the template, I changed the page layout to Elementor Canvas in the page settings. This gave the desired effect of a full-screen menu on mobile without the header and footer.
how did you edit the CSS so it works with your page-solution? :)
Unique modern mobile menus have been a top design priority for years! Great tutorial as always Jeffrey and thank for reminder about Crocoblock, I’ve been a Pro member for years but haven’t used their plug-ins on sites lately so will bring aboard more in 2023 client sites
Glad to see others sharing the same ❤️ for mobile menus!
Hi Jeffrey.
Thank you for this step by step tutorial.
I'm having the issue of the slide out not overlapping the post below.
Can you please tell me what I did wrong?
Best video on this subject, by far. Thank you!
Thanks a lot Jeffrey, really, besides to enjoy your way to teach with elementor and programming, this is very useful and didactic. Greetings from Bogotá, Colombia!
Thank you so much for this! 🙏
goat! thanks man! this still works for anyone wondering.
Thank you again. Yor style is really good and keep my attention and my retention really high.
Love the videos man, so helpful! Honestly you've been a ton of help on this journey.
How would you prevent scrolling from happening when mobile menu is open? I'm trying to make a header by combining this video and the header that shrinks on scroll video you made. It's also shrinking the menu logo on scroll.
Thx for a great tutorial, but i have trubels with the menu not closing on cklick, any thoughts?
Hi Bro, I have a question, when I set the width: %80 menu position appears middle of the screen, question that is how can I set position menu section right or left, as in crocoblock hamburger menu? Thanks for tutorial by the way. Keep go on.
Good morning,
Nice video, thank you!
Small problem on my side:
I added the Menu hamburger icon by following all the steps with the online setting like everything else (Logo and Desktop Menu), with a Horizontal Alignment: "Space between".
However on mobile, the Hamburger logo and icon remains stuck in the middle of the column, the "Space between" setting is visibly canceled by a line of code in the HTML or CSS. Can you please tell me what I could try to modify in these codes?
In advance, thank you very much!
Great tutorial!!! Thanks for sharing!
Well done. Never mind the SEO aspect, the nav tag @14:45 is crucial for accessibility compliance if you're using that widget for a navigation menu.
Thanks and for sure, that nav tag is important!
Please elaborate if you can.
Is it possible to split the menu in two rows? I mean, when the menu button is clicked, opening a menu which contains 2 columns inside, with different backgrounds. Thanks in advance if you can answer!
Thanks Jeffrey! This works great as long as we don't use the Sticky header option. Visually it will work but you'll get the following 2 page errors in the DevTools console:
Duplicate form field id in the same form.
Violating node:
Any idea on how this can be fixed? Thanks!
Your content is gold! Thank you
a very good and clear tutorial thanks for you that helped me
Great tutorial, thanks man. !
Thanks a lot for making our lives easier. Very cool solution!
Thanks!
I am new to this, i tried it everyting goes well but now i have two humburger icon, once the old header is creating over on the mobile & Tab size and one i created it, any advise how to fix that ?
just what i needed for my project. Thanks
So glad to hear Robert!
I have a problem with my submenu indicator, it always stays black even if i change font color of the nav menu.
In preview the section appears on screen but when i browse its doesnt appear it just shows the short code ! Any fix please ?
I use the icon list, but it didn't came out when I was in the CSS step, it just shown the hamburger menu, without the list
One question! Everything works perfectly fine. But the middle line for the hamburger menu is thicker. Didnt touch your code and the display:block still has a height: 2 px;. Do you know how to fix it and get 3 lines that have the same height? Regards Ivan
Hello excellent my congratulations.
I have a question.
When you put it in mobile mode, the button or label (.lytbox-button) disappears from the field of vision and is only up to 770 of screen width, below that it disappears and you cannot exit the menu.
Could you please check it and help me to solve this problem.
Exactly what I needed, thank you
Hi Jeff, many thanks for your tutorial ! Appreciate it :) I would have a question regarding the scrolling down capability. When I open the dropdown of my menu, things are opening and pushing elements below. then these elements are going out of the window. I am trying to scroll down but this is scrowling down the page in the background, not the menu itself. Is there any possibility to implement a menu scrolling down feature ? How would you do that ? Thank you !! Best regards (continue your video, it helps very much !).
Hi have the same issue - have you found a way to solve it? Thanks :)
He tenido que hacer unos cambios en el css para que funcione al 100% y depende del dispositivo (sobretodo en tablet-ipad) todavía se observa un poco la página de abajo del menú, como si la opacidad no fuese del 100% ni estando el z-index a 101... pero por el momento cumple. Es genial que hagas videos así para practicar y tener nuevas ideas. ¡Gracias!
U can set the icons in nav menu itself.. By using the font-awesome.. Just add there CDN in header.php and then in appearance -> Menus option add the code in menus specific and it will show the icon.
Great tutorial on the different ways to create this mobile menu! . Quick question, using the Nav module if you apply a link to the your "about" menu dropdown text in Appearance - Menus to say, go to an about page, but also have the dropdown sub menu items. When you close the "about" text by clicking it on mobile. It will bring you to the about page instead of simply closing the dropdown first. Would you have a workaround for that?
Have you found the solution to it?
Hello sir,
I am a student from Sri Lanka,
and your video very very helpful to me,
Thank you very much sir,
Wishing you long , hapy and healthy life.
Thank you very much Jeffrey for this. We really appreciate it.
I followed all the steps very carefully and by the end of the whole process on the Desktop dimensions everything works perfectly, exactly as shown in the tutorial.
However, when I switch to tablet and mobile modes, the whole header from end to end disappears. However its space still exists, but just as a blank white space.
I'm using Astra Theme, do you think it's probably a bug?
That’s strange. I haven’t tested on Astra yet. Can you try switching to Hello theme and see if that still happens? And if possible, share a link here and I can take a quick look
Awesome! Thank you!
Excellent tutorial! Thank you! I went ahead and modified just two parameters of the css code to have the menu display only on 65% of the screen width to the right. Wondering what would I have to add/change to the code to have the menu hide, if the users click outside of the menu, not only when it hits the X.
And if the user clicks in the nav item, the menu should closes too. But I think it's only possible via javascript.
Hi Andrunistor! I'm trying to do this... which two parameters of the css code have you modified to accomplish that (display only on 65% of the screen width to the right)?
Thanks, This is great tutorial, I can't figure out how to change the css navigation slide from left to right? Right now it animate from right to left
Love it! I know you've been working on this one.
Thanks Uriel! This did take some time and was a fun one
@@LytboxStudio I feel that. I have a few projects I'm working on and I'm having fun haha. Thats what it's all about. Love figuring things out.
Great tutorial!!! Always a new and clever solution, thanks bro!
Thanks! 🙏
@@LytboxStudio You can please plus a code for make a similar menu, but for a search section? A mean, press a Search icon and slide in the section and show a close button for close the section? Thanks!!
@@estudiocrow that’s a cool idea. I added it to my idea board 😎
Subscribed! I appreciate your content. Really helped my husband 😂
How can I have the menu slide in from the left side of the page? Thx
You got a new subscriber due to this video save my problem.
Hi Jeffrey, nice tutorial. But this mobile menu is not responsive and scrolling is not possible when you turn your mobile horizontally. Can you fix this?
thanks for a great tutorial
Thanks a lot for this great tutorial! It's a shame that Elemontor doesn't have this kind of option. I used this method because I have a menu with a transparent background that becomes opaque when you scroll on the page. On the Mobile version there is no possibility to have a directly opaque background, so there was a strip and then the drop down menu underneath, not very nice. Anyway I don't know if my explanation is clear but thanks to your method it looks much better now!
Jeff, please help. I tried to use the menu with an anchor on my own page, but unfortunately it doesn't disappear, it stays open. Also, when the menu bar is too long, the bottom is cut off, the bottom items from the submenu are not displayed, maybe it can be solved so that the menu bar can be moved up and down? But the anchor is most important, why doesn't it close when I click? Thank you very much for the tutorial, it's a big help.
Have you found the solution to it?
WOW!!! I thought that´s not possible to make, once again, you solved, more important, not plug-in added, or popup !!!😃
Great video! Thanks!
Thanks!
Jeffrey Nice, informative tips...!!
SO glad to hear thanks!
Awesome, thanks
Great tutorial as always but how to combine this with a sticky header and color change BG? When the hamburger menu needs to change color?
In the CSS to this seems to be a typo. It says hamburguer instead of hamburger a few times. Is this on purpose?
thanks a lot for this tutorial, however i have problem. I don't use links but # to redirect to a section of my page. But once i click on a link, the menu does not close automatically, so it's confusing because when you click the menu is still displayed but nothing seems to happen. But the scrolling effect applies well, but you need to close the menu to see it. Do you know how to make it close automatically after clicking on a link ? I would really appreciate that !
Have you found the solution to it?
Super helpful!
@LytboxStudio - Great Tutorial. Slight issue when the mobile is turned horizontal where the menu seems to move up to the top of the page. Any advice on how this could be fixed?
I think this will need more styling with media queries. I’ll look into this and update the code soon
What about setting width to less than 100% when using in desktop?
THANKS A LOT MAN !!!
🙏
Thank you 🙏🏻🙏🏻🙏🏻
🙏
Perhaps there is a scroll enable code I need to add?
its cool. i have a problem with it , hamburger menu works well but there is no X button so i cant close it.
How cool is that!
Why do you think the Elementor popup/off-canvas menu is not good for SEO purposes? If you could only explain how it affects the website.
Thanks!
Thanks and great questions! Everything in the popup is not in the source code that Google can crawl so Google can’t see the menu and it doesn’t get indexed. Only when triggered does the code with the menu get pulled into the source code.
If you have your desktop menu set up, it’s not too big of a problem because Google can read that. But if you are only using a popup menu for desktop and mobile then then it is. I’ve also heard issues of popup blockers effecting the popup menus.
Nice one :) but it possible to close the slide with the escape button for accessibility (WCAG)
Jeffrey, I love you ... not only for this video. :-) Thank you very much!
Hi! Hope you can help me. I loved this menu but I have a problem, on Android devices (Crome) it causes an horizontal scroll on the page. :( I've been inspecting the element but I can't fix it.
I have the same problem
How would I set a custom icon for this instead of the hamburger icon?
Hey Jeff, your tutorias are very helpful, keep doing that... i wanna see if we can change hamburger icon too, and add some animation... Thanks!
Those would be a tutorial in itself. And sounds like a fun one. It got added to my list 💪
Does it work on a sticky menu ? This option you did? Great tutorial regardless
@LytboxStudio - thank you Jeffrey for this great video. I took the second option and extended it, within my template I used the Jet Blocks Mega Menu, which gave me the ability to use icons within the menu. Really pleased with the results. The one thing that I wish was possible was to be able to shift the position of the label on the Hamburger Panel element. I guess it is possible to dive into the code, but it would look nicer if you could place it under the hamburger menu button. Ah well, again thanks so much for the inspiration. Thanks again.
Hi, Thanks for the great tutorial! But I Had a problem with hamburger menu icon, when clicked the hamburger and changed to “X” then I do scroll the page, the “X” menu is moving as scrolling. Can you share me how to fix this issue to get fixed “X” button.
Very appreciate it if you would answer. Thanks
add this in the CSS
.lytbox-nav_control:checked~.lytbox-button .hamburguer {
position:fixed;}
Hey guys, great tutorial. Can someone help me please? I created that menu with HTML and CSS using icon list. It is working just fine, but does anyone know how to close the menu, when I click on the link in the menu, so I can see the content on my site? Thank you so much.
I have the same issue
very helpful!
Thanks! 🙏
This is wonderful Jeffrey! But definitely lacking usability/feedback by missing a way to close the menu "automatically" after clicking/touching on the menu item (menu item either linking to a same page section or to a new page). Not right having to close the menu to see if the click/touch worked. Has anyone solved that problem?
You can adjust the width of the slide out and tap the empty space or the close button to close. And it should close when going to a different page. I’ll test again later and update the code snippet to make sure it’s working right.
To have the menu close for anchor link in the same page will need a whole other set of code. I already have that video recorded and will be out this week
@@LytboxStudio Hey Jeffrey ! Scroll problem still exist can you help ?
Another fantastic tutorial, @Jeffrey. By the way, why not using a popup instead of "complex" CSS code to open the mobile menu?
Thanks @Francois and great question. The issues with using the popup for mobile menus are the SEO - Google can’t read your menus since they don’t appear in the source code until the popup is triggered. This causes problems with indexing your sitemaps. And some popup blockers can block the popups. It’s rare but I’ve heard of it happening. And off-canvas solution is much better
@@LytboxStudio Gotcha. Thank you, Jeffrey for taking time to answer 🙏
@LytboxStudio Great menu! But im having a problem.
im building a singlepage site, so my menu is linked to different sections in the same page. Whenever I click on the links of the menu, it goes to each sections correctly, BUT the "X" to close the menu disappears. Do you have any fix?
I do got a fix! It's here in this tut - czcams.com/video/JgGNIYSR_js/video.htmlsi=26AosOka8m7yxauR
Thank you so much for the quick reply. I'm going straight to that video. Have a great day 😁
Is it possible that this is not working with the new mega menu? Some how can't get the menu stay open. Even if I set the layout to dropdown and then to additional settings no breakpoint. Any ideas?
Could be a conflict with a plugin or the set up. Not sure I would use a mega menu widget for this. Megas are hard to use for mobile. Have you tried the WordPress Menu Widget? And try deactivating other plugins to rule out a plugin conflict
I have question.
When I include an anchor link in the menu and click on it while remaining on the same page, the menu slider fails to close automatically. Do you have any suggestions or solutions for this issue?
Thanks for amazing tutorial!
@Adam-yq3ug Have you found the solution to it?
Thanks Jeffrey
For sure!
Hey there! Amazing video. Ran into a hiccup though, for some reason when I open the menu on tablet/mobile it doesn't show the menu when you click to open it, unless I scroll a little bit.
Would you know a fix/have you run into this?
Same problem on some sites
YES! I finally figured it out, it was driving me insane. Turn off 'FULL-WIDTH' under the submenu selector options, and then set it to full width under Layout
How can I align the hamburger icon to right? Thanks fo the video!!
I added float: right; to the .lytbox-button section in the CSS code and it worked. I am not sure if I also need to change display: block; to display: inline; but adding the float thing works
Jeff, I'm using pop up to create a slide menu for mobile. Is that a bad practice for SEO?
I use pop ups too. But they are not good for SEO because the menu on them can’t be seen by Google to index. If you have a good desktop menu set up right then you should be good and it won’t hurt the SEO on your site. But if you use a popup for both desktop and mobile it’ll for sure impact your SEO. I’ve also heard about popup blockers blocking El’s popups. I’ve never ran across it personally but something to consider.
@@LytboxStudio I appreciate your input on the topic. So you would def. advise going with sections how you are building them and then trigger to open the menu right? I have also enrolled in your Elementor course and looking forward to starting :)
But we are already having a popup option and its same here also we embed a template and through popup also we add a template so what is the use of this . please explain
I think I explained in the video. The pop up is not good for SEO. Additional plugin add bloat. This method reduces bloat and can keep your mobile menu SEO friendly
I followed the tutorial but when I clicked to expand the icon it doesn't open the template I created it just appeared written "[elementor-template id="695"]
Maybe because the Nav Widget is gone and now we have only the "Wordpress Menu", does it change the CSS code?
i have the same issue have you found a solution?
@@zerothcore3220 unfortunately not :/
Mine will not scroll - any suggestions?
Does it matter creating the templates with containers vs sections?
It doesn’t. This will work the same with both.
Excelent!!!
I've done this 20 times and still I come back to the video to guide me through the steps lol
Excuses me, sir, I need help.
I am working on a project which is a portfolio. Now I need to add a " like and dislike button with count " on the homepage of the portfolio so that if anyone visits my portfolio. If visitors like/dislike it, they can like/dislike my page. So I want to do this thoroughly. Custom CSS and is. But I can't get how to do it. Will you please help me to make a video of it? I will be grateful if you Give it
Please post a video on this.
Thanks and good request. This is something more niched, I wouldn’t try and custom build it unless a client paid a good amount;)
But I have used something like this before. Check out Hotjar. They have a great feedback widget and I think you can use this with the free plan - www.hotjar.com/product/feedback/
Please help me,
in my Saved Templates menu the shortcode doesn't appear, how do I make it appear?
It's a late reply but in case you haven't found it, in the top right corner, there is an option called Screen Options. open that up and turn on shortcode
Thanks for this video! I'm having a problem where the menu doesn't close after clicking anchor links on the same page.
I have another video on making the menu close for anchor links - czcams.com/video/JgGNIYSR_js/video.html
By adding this JavaScript code in 'Elementor > Custom Code > Add New' selecting 'Location: - End' and selecting 'Always load jQuery' this issue will be resolved:
document.addEventListener('DOMContentLoaded', function() {
var navControl = document.getElementById('nav-control');
var menuLinks = document.querySelectorAll('.lytbox-navigation a');
menuLinks.forEach(function(link) {
link.addEventListener('click', function() {
if (navControl.checked) {
navControl.checked = false;
}
});
});
});
I can´t see the hamburger menu, but If I click the right corner the menu slides out. There´s no X either. Could anyone please help me find out what I did wrong? I´ve watched and done this over and over a few times.
I have the Hello theme and used the Nav menu widget and code.
Can you share a link? I can take a quick look
@@LytboxStudio where can I share the link? I think it’s getting deleted here
Where can I get that plugin? :) Sorry had to be the first smart arse..
Nicely put together. Best thing is no JS, so no double tap on mobile when using delay JS :)
Well done dude.
Haha good one!
I wanted to found a CSS only solution that was as minimal as possible. I tried over a dozen. If my coding skills were as good as yours I’m sure it would be even cleaner 👨💻
isn't easier with popups in elementor like that we don't need javascript ?
Yep, it's easier, but this is better for SEO. All depends on the projects to choose the best method that fits.
Sadly seems like 'Nav Menu' has been replaced with a beta widget called 'Menu' (activated in Elementor experimental features) and doesn't seem to work in the same way. The default 'Wordpress menu' also doesn't offer the same options as 'Nav menu' widget.
The Nav Menu widget was only renamed as WordPress Menu. Personally I think that wasn't a good UX decision, it's very confusing for everyone. But they are the same widgets. Nav Menu = WordPress Menu
@@LytboxStudio From what I can see, the Wordpress Menu widget is missing some of the options of Nav Menu, such as the align options at 12:05, which is when I realised I was using a different widget to your tutorial.
Thanks for the response and all the great content!
@@ilaw I think this change happened when updating the alignment management with flex. But for sure, I'd like to see this widgte get some love and has many opportunities for improvements.
Hello!
Great tutorial!
Any solution for closing the menu after visiting a link from the offcanvas menu?
For example:
1. I'm on homepage.
2. I click on a button (elementor Button widget) to go to Contact page for example;
3. I go back to previous page (homepage), it goes back, but the offcanvas menu is open.
Thanks!
It’s best to not have your menu links open in a new tab. Only time I have links open in a new tab is if the links are external such as social media links. That will solve it. But if you need them to open a new tab, you can try this method to closing the pop up menu after click - Single Page Scrolling Elementor Menu (Desktop & Mobile Anchor Scroll Menus)
czcams.com/video/JgGNIYSR_js/video.html
@@LytboxStudio
Hello Jeffrey,
I think I didn't explained very well.
I'm not using menu links opening in new tabs. I'm not talking about any pop-up offcanvas menu.
I'm talking about the checkbox offcanvas menu you explained in this tutorial.
Whenever I navigate to a page from this offcanvas menu (which is a very nice approach instead of popups) and then I go back to the previous page where I came from, it cames back tot the previous page but the offcanvas menu is open, insteat of being closed and see directly the page.
I think the issue is that when you go back to previous page the *checkbox* which opens the menu is still ticked.
Maybe could we implement some js to uncheck the checkbox after you navigate to another page by pressing any link in the offcanvas menu?
Thanks!
@@somelethalart will definalty need some js. You can use the js in the other video I shared and modify it for checkboxes.
Agregando este código JavaScript en "Elementor > Custom Code > Add New" selecciona "Location: - End" y selecciona "Always load jQuery" y este error será resuelto:
document.addEventListener('DOMContentLoaded', function() {
var navControl = document.getElementById('nav-control');
var menuLinks = document.querySelectorAll('.lytbox-navigation a');
menuLinks.forEach(function(link) {
link.addEventListener('click', function() {
if (navControl.checked) {
navControl.checked = false;
}
});
});
});
When clicking the link you want to be taken to, this screen does not close. How can I solve it ?
Have you found the solution to it?
It seems a little buggy and not working as proper... The 'X' button is often not where it should be, there are layout difficulities. On Chrome iOS there is no slide out as well. Actually this is prepared for containers enabled, and if you did not build your layout using cotainers enabling it can mess up your site.
Just wondering if anyone else is having an issue of it working on the mobile and then all of a sudden it decides to stop working? When I tap on the hamburger icon on the mobile, it's not doing anything and not opening the menu now when it was working a few days ago, and I dealt with this a couple weeks back and somehow fixed it by just remaking the container it sits in for the mobile header, but it's happened again. It's very strange and annoying lol
I think I sorted it out again lol
I'll be back to check in if it fails on me one more time! I love this video so much and this design, I don't want to have to change it out :(
our are the best!!!!!
I feel like it's just better to straight up modify everything you have by your default settings with css. I can set up every font type and color from the theme customizer and simply reuse it with css by using the var() function. I can add awesome hover effects, or add effects to my hamburger menu just by using css.
My menu isn't working in Firefox (it's not showing up at all). Thoughts??
I’m checking it out on my side. Must be some updates in El. I’ll have an update soon here
@@LytboxStudio fabulous, thank you!! Just fyi - the logo is visible, it's just the hamburger menu icon that isn't showing. Very strange haha. Thanks again!! (I followed your other tutorial - the slide out mobile popup menu in case that makes a difference).
Good tutorial but if you have a large navigation - you can't scroll. Maybe just need to adjust CSS to accommodate this
my hamburger icon won't show up when I save the HTML & CSS
Can you check the Z-Index? You can share a link or Loom video in the comments on this tuts article here - lytboxacademy.com/slide-out-mobile-menus-for-elementor/
Show only shortcode if on mobile tap on menu)