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.
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
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!
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.
@@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!!
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.
You need Elementor Pro for the header and footer builder. But there are work arounds and can make this work but will take adjusting the code and development.
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 👨💻
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!
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.
Thanks, This is great tutorial. I got it work. I have an issued setting top lytho-navigation between on Mobile and Tablet view. How do I add the code for mobile and tablet on Top with a difference value #?
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.
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.
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)?
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.
Hey i have the problem and i think you have it too when: opening the menu (on your phone) -> clicking to one of your sites -> *site opens* -> clicking again on the menu. Sometimes it just closes it self. Do you know why?
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) th-cam.com/video/JgGNIYSR_js/w-d-xo.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!
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
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 !
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
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.
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?
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.
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.
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!
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!
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
@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 did it and it worked great but suddenly the submenus stopped opening. The rest of the links and the pop up work ok but i can't get the submenus to open. Does anyone know why
An update to Elementor or another plugin must have conflicted with it. Can you try to troubleshoot by deactivating other plugins 1 at a time to see if it’s another plugin conflicting?
@@LytboxStudio I tried changing the theme and using elementor safe mode but still it didn't work. I couldn't fix it so i started using the new off canvas elementor widget and it works great. Your videos are great and really helpful. Thanks a lot for responding.❤
@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?
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?
Thank you, I've used this for a few of the websites I've designed. But, I've run into a problem with the latest website I'm building. It's a single-page website so the nav menu items link to different sections of the same page. So it scrolls down to the different sections. Now the issue is that, the mobile menu doesn't disappear when it scrolls down to a section, and to make matters worse, the X to close the menu disappears, so there is no way to leave the mobile menu. Do you have a workaround for this issue? 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 !).
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?
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
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.
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.
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
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?
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!
@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.
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.
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
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!
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
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
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 ?
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/
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 :)
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/
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
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?
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
@@stribormarincic9129 for SEO and semantic markup its best to set the main header section/container to header and have the nav inside the header tags. Check out this video that I went in detail in setting up html tags for SEO - SEO for Elementor, Bricks, & WordPress (Part 1): HTML5 Semantic Tags th-cam.com/video/THL-_3CYlDU/w-d-xo.html and SEO for WordPress with Elementor Websites (Part 1 Updated) th-cam.com/video/DDmGBCAAu7k/w-d-xo.html
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!
goat! thanks man! this still works for anyone wondering.
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! 🙏
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.
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.
Awesome tutorial! Thanks for sharing!
Thanks Mark!
Thanks a lot for making our lives easier. Very cool solution!
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.
Best video on this subject, by far. Thank you!
Thank you again. Yor style is really good and keep my attention and my retention really high.
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.
just what i needed for my project. Thanks
So glad to hear Robert!
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 😎
You got a new subscriber due to this video save my problem.
Super helpful!
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
WOW!!! I thought that´s not possible to make, once again, you solved, more important, not plug-in added, or popup !!!😃
What about setting width to less than 100% when using in desktop?
Exactly what I needed, thank you
Perhaps there is a scroll enable code I need to add?
I don't have Elementor Pro, can I use this tutorial with Elementor Header & Footer Builder ?
You need Elementor Pro for the header and footer builder. But there are work arounds and can make this work but will take adjusting the code and development.
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 👨💻
Great tutorial!!! Thanks for sharing!
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?
Subscribed! I appreciate your content. Really helped my husband 😂
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.
a very good and clear tutorial thanks for you that helped me
Thanks, This is great tutorial. I got it work. I have an issued setting top lytho-navigation between on Mobile and Tablet view. How do I add the code for mobile and tablet on Top with a difference value #?
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?
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)?
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.
Hey i have the problem and i think you have it too when: opening the menu (on your phone) -> clicking to one of your sites -> *site opens* -> clicking again on the menu. Sometimes it just closes it self. Do you know why?
Jeffrey Nice, informative tips...!!
SO glad to hear thanks!
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)
th-cam.com/video/JgGNIYSR_js/w-d-xo.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;
}
});
});
});
Great tutorial, thanks man. !
Thx for a great tutorial, but i have trubels with the menu not closing on cklick, any thoughts?
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.
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
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
How can I have the menu slide in from the left side of the page? Thx
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?
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 🙏
Great video! Thanks!
Thanks!
Excelent!!!
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.
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?
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.
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
Awesome! Thank you!
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!
Mine will not scroll - any suggestions?
Your content is gold! Thank you
THANKS A LOT MAN !!!
🙏
I've done this 20 times and still I come back to the video to guide me through the steps lol
Nice one :) but it possible to close the slide with the escape button for accessibility (WCAG)
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!
Good tutorial but if you have a large navigation - you can't scroll. Maybe just need to adjust CSS to accommodate this
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
does this work with a mega menu?
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
Thanks Jeffrey
For sure!
@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
I have a problem with my submenu indicator, it always stays black even if i change font color of the nav menu.
I did it and it worked great but suddenly the submenus stopped opening. The rest of the links and the pop up work ok but i can't get the submenus to open. Does anyone know why
An update to Elementor or another plugin must have conflicted with it. Can you try to troubleshoot by deactivating other plugins 1 at a time to see if it’s another plugin conflicting?
@@LytboxStudio I tried changing the theme and using elementor safe mode but still it didn't work. I couldn't fix it so i started using the new off canvas elementor widget and it works great. Your videos are great and really helpful. Thanks a lot for responding.❤
@@rad7930 glad you found a solution. A custom built slide out can be a pain to build. I'm glad Elementor finally launched an off-canvas widget
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 - th-cam.com/video/JgGNIYSR_js/w-d-xo.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;
}
});
});
});
@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 - th-cam.com/video/JgGNIYSR_js/w-d-xo.htmlsi=26AosOka8m7yxauR
Thank you so much for the quick reply. I'm going straight to that video. Have a great day 😁
Thank you 🙏🏻🙏🏻🙏🏻
🙏
Awesome, thanks
thanks for a great tutorial
very helpful!
Thanks! 🙏
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?
Thank you, I've used this for a few of the websites I've designed. But, I've run into a problem with the latest website I'm building. It's a single-page website so the nav menu items link to different sections of the same page. So it scrolls down to the different sections. Now the issue is that, the mobile menu doesn't disappear when it scrolls down to a section, and to make matters worse, the X to close the menu disappears, so there is no way to leave the mobile menu. Do you have a workaround for this issue? Thank you!
I have a video tut just for this here -th-cam.com/video/JgGNIYSR_js/w-d-xo.htmlsi=lIwhD8S1JUPeqi6E
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 :)
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 :/
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
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.
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.
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 ?
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?
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!
@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.
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.
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;}
its cool. i have a problem with it , hamburger menu works well but there is no X button so i cant close it.
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!
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
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
our are the best!!!!!
In preview the section appears on screen but when i browse its doesnt appear it just shows the short code ! Any fix please ?
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 ?
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/
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 :)
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/
How would I set a custom icon for this instead of the hamburger icon?
Doesnt work anymore because NAV Menu is gone
Cap
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
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
Why not just use popup feature that comes with elementor and trigger it on humberger icon?
That’s another option but it’s not SEO friendly and has a few other issue. This method is better for SEO and a cleaner way for mobile menus.
Popup blockers in the browser
@@LytboxStudio just a thought.. cant the seo issue be fixed by having a menu in the footer?
@@LytboxStudio When working with Sections you can label the section as NAV, don't know if that helps of you are working with popup
@@stribormarincic9129 for SEO and semantic markup its best to set the main header section/container to header and have the nav inside the header tags. Check out this video that I went in detail in setting up html tags for SEO - SEO for Elementor, Bricks, & WordPress (Part 1): HTML5 Semantic Tags
th-cam.com/video/THL-_3CYlDU/w-d-xo.html and SEO for WordPress with Elementor Websites (Part 1 Updated)
th-cam.com/video/DDmGBCAAu7k/w-d-xo.html