Slide Out Mobile Menus for Elementor With No Plugin or Pop Ups

Рет қаралды 71,542

Күн бұрын

✨ 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

Пікірлер: 202

@bySterling Жыл бұрын

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

@LytboxStudio Жыл бұрын

Glad to see others sharing the same ❤️ for mobile menus!

@webprimedesign Жыл бұрын

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.

@UNIWASH-AB 9 ай бұрын

how did you edit the CSS so it works with your page-solution? :)

@benkilowhiskey 9 ай бұрын

Best video on this subject, by far. Thank you!

@tommywright4510 Ай бұрын

goat! thanks man! this still works for anyone wondering.

@macropsialberto 5 ай бұрын

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!

@LytboxStudio 3 ай бұрын

Thank you so much for this! 🙏

@pedromiguelpagan-rivera8970 Жыл бұрын

Thank you again. Yor style is really good and keep my attention and my retention really high.

@DigitalAdvanceNetwork Жыл бұрын

Great tutorial!!! Thanks for sharing!

@EyadSammour Жыл бұрын

a very good and clear tutorial thanks for you that helped me

@DickDollars Жыл бұрын

Your content is gold! Thank you

@patricksuchy3212 Жыл бұрын

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.

@srhadden 3 ай бұрын

Thanks a lot for making our lives easier. Very cool solution!

@LytboxStudio 3 ай бұрын

Thanks!

@Purcella13 Жыл бұрын

Subscribed! I appreciate your content. Really helped my husband 😂

@elev8tdwebdesign 8 ай бұрын

Exactly what I needed, thank you

@primalscream40 Жыл бұрын

just what i needed for my project. Thanks

@LytboxStudio Жыл бұрын

So glad to hear Robert!

@pearloftheocean2269 8 ай бұрын

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.

@TheHustlerMan Ай бұрын

You got a new subscriber due to this video save my problem.

@Javiergcrespo 5 ай бұрын

Great tutorial, thanks man. !

@Magenta-Goddess Ай бұрын

I've done this 20 times and still I come back to the video to guide me through the steps lol

@andre_di Ай бұрын

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!

@topseermarketers 17 күн бұрын

Super helpful!

@hanspaulpons5128 Жыл бұрын

WOW!!! I thought that´s not possible to make, once again, you solved, more important, not plug-in added, or popup !!!😃

@SamWereb Жыл бұрын

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.

@LytboxStudio Жыл бұрын

Thanks and for sure, that nav tag is important!

@openparachute17 Жыл бұрын

Please elaborate if you can.

@fabrictexture4767 Жыл бұрын

Jeffrey Nice, informative tips...!!

@LytboxStudio Жыл бұрын

SO glad to hear thanks!

@farizg Жыл бұрын

Awesome! Thank you!

@muhammadshafiqueadam2972 Жыл бұрын

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?

@susangemayel-tapper3794 Жыл бұрын

thanks for a great tutorial

@whatthefuck4982 Жыл бұрын

Jeffrey, I love you ... not only for this video. :-) Thank you very much!

@estudiocrow Жыл бұрын

Great tutorial!!! Always a new and clever solution, thanks bro!

@LytboxStudio Жыл бұрын

Thanks! 🙏

@estudiocrow Жыл бұрын

@@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!!

@LytboxStudio Жыл бұрын

@@estudiocrow that’s a cool idea. I added it to my idea board 😎

@UrielSoto Жыл бұрын

Love it! I know you've been working on this one.

@LytboxStudio Жыл бұрын

Thanks Uriel! This did take some time and was a fun one

@UrielSoto Жыл бұрын

@@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.

@DEBUGENTITY 8 ай бұрын

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.

@yvessoke8558 8 ай бұрын

Awesome, thanks

@discussingsplinterlands7728 Жыл бұрын

Great video! Thanks!

@LytboxStudio 11 ай бұрын

Thanks!

@JamesRMackay Жыл бұрын

@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.

@CryptonXplorer 9 ай бұрын

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!

@ayoubchakri7555 3 ай бұрын

Thank you 🙏🏻🙏🏻🙏🏻

@LytboxStudio 3 ай бұрын

🙏

@arnaudchappuis3413 Жыл бұрын

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!

@geoffreycarmody Жыл бұрын

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?

@siqbee-web-developer-designer 4 ай бұрын

Have you found the solution to it?

@fivedays68 Жыл бұрын

Thx for a great tutorial, but i have trubels with the menu not closing on cklick, any thoughts?

@beastmodestudios7043 8 ай бұрын

THANKS A LOT MAN !!!

@LytboxStudio 7 ай бұрын

🙏

@khondang6000 17 күн бұрын

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

@raphaelduzentos Жыл бұрын

Thanks Jeffrey

@LytboxStudio Жыл бұрын

For sure!

@instennis7683 8 күн бұрын

Excelent!!!

@TimDuppen 8 ай бұрын

Nice one :) but it possible to close the slide with the escape button for accessibility (WCAG)

@unityvisionro Жыл бұрын

very helpful!

@LytboxStudio Жыл бұрын

Thanks! 🙏

@tilemachosmanos2606 Жыл бұрын

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?

@LytboxStudio Жыл бұрын

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

@diagosa Жыл бұрын

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.

@clementborisov7050 28 күн бұрын

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.

@morgancotten Жыл бұрын

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!

@vmiyeli Жыл бұрын

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 !).

@johncolombo885 5 ай бұрын

Hi have the same issue - have you found a way to solve it? Thanks :)

@aslike4me Жыл бұрын

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!

@LytboxStudio Жыл бұрын

Those would be a tutorial in itself. And sounds like a fun one. It got added to my list 💪

@christiannyirenda186 6 ай бұрын

Does it work on a sticky menu ? This option you did? Great tutorial regardless

@lorenzobrandimarte1427 Жыл бұрын

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!

@andrunistor4433 Жыл бұрын

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.

@FredericoPeres Жыл бұрын

And if the user clicks in the nav item, the menu should closes too. But I think it's only possible via javascript.

@backpackcruiser1509 Жыл бұрын

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)?

@EndierMX 7 ай бұрын

our are the best!!!!!

@sekawantiabintunyasaa182 Жыл бұрын

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

@pleuratpllana Жыл бұрын

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!

@LytboxStudio Жыл бұрын

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.

@dvrkcanis9373 11 ай бұрын

I have a problem with my submenu indicator, it always stays black even if i change font color of the nav menu.

@szaszcsaba Жыл бұрын

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.

@siqbee-web-developer-designer 4 ай бұрын

Have you found the solution to it?

@comleonmoto Жыл бұрын

Another fantastic tutorial, @Jeffrey. By the way, why not using a popup instead of "complex" CSS code to open the mobile menu?

@LytboxStudio Жыл бұрын

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

@comleonmoto Жыл бұрын

@@LytboxStudio Gotcha. Thank you, Jeffrey for taking time to answer 🙏

@popii8636 Жыл бұрын

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.

@marioncouturier5299 9 ай бұрын

I have the same issue

@JS-ix4kv Жыл бұрын

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?

@naddyamin Жыл бұрын

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 ?

@wpeasy Жыл бұрын

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.

@LytboxStudio Жыл бұрын

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 👨‍💻

@HammasUsman Жыл бұрын

In preview the section appears on screen but when i browse its doesnt appear it just shows the short code ! Any fix please ?

@digitalnomads2673 11 күн бұрын

What about setting width to less than 100% when using in desktop?

@Kazoompie Жыл бұрын

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

@user-jt4pl6si3i Жыл бұрын

Good tutorial but if you have a large navigation - you can't scroll. Maybe just need to adjust CSS to accommodate this

@cormacmcclafferty 7 ай бұрын

@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?

@LytboxStudio 7 ай бұрын

I think this will need more styling with media queries. I’ll look into this and update the code soon

@m_cruz Жыл бұрын

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.

@user-ww9zl9jw5x Жыл бұрын

its cool. i have a problem with it , hamburger menu works well but there is no X button so i cant close it.

@Adam-yq3ug 5 ай бұрын

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!

@siqbee-web-developer-designer 4 ай бұрын

@Adam-yq3ug Have you found the solution to it?

@lipsunglassesaustralia8483 17 күн бұрын

Perhaps there is a scroll enable code I need to add?

@RealRewards-bo3lh 27 күн бұрын

How can I have the menu slide in from the left side of the page? Thx

@thibaudherbert3144 Жыл бұрын

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 !

@siqbee-web-developer-designer 4 ай бұрын

Have you found the solution to it?

@backpackcruiser1509 Жыл бұрын

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?

@LytboxStudio Жыл бұрын

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

@bekircanaydn9029 Жыл бұрын

@@LytboxStudio Hey Jeffrey ! Scroll problem still exist can you help ?

@santtuluoma Жыл бұрын

How can I align the hamburger icon to right? Thanks fo the video!!

@juanorttega Жыл бұрын

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

@nickasbell296 Жыл бұрын

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?

@Tserang 10 ай бұрын

Same problem on some sites

@TPat1916 6 ай бұрын

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

@noragray1956 3 ай бұрын

Thanks for this video! I'm having a problem where the menu doesn't close after clicking anchor links on the same page.

@LytboxStudio 3 ай бұрын

I have another video on making the menu close for anchor links - kzfaq.info/get/bejne/gM13gayKuLjDmqc.html

@Bukanderivia 6 күн бұрын

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; } }); }); });

@alfonshere 7 ай бұрын

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

@TPat1916 6 ай бұрын

add this in the CSS .lytbox-nav_control:checked~.lytbox-button .hamburguer { position:fixed;}

@andrejabur2822 10 ай бұрын

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?

@zerothcore3220 6 ай бұрын

i have the same issue have you found a solution?

@andrejabur2822 6 ай бұрын

@@zerothcore3220 unfortunately not :/

@pixelstagart Жыл бұрын

How would I set a custom icon for this instead of the hamburger icon?

@ThomasSogos 2 ай бұрын

@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?

@LytboxStudio 2 ай бұрын

I do got a fix! It's here in this tut - kzfaq.info/get/bejne/gM13gayKuLjDmqc.htmlsi=26AosOka8m7yxauR

@ThomasSogos 2 ай бұрын

Thank you so much for the quick reply. I'm going straight to that video. Have a great day 😁

@Javiergcrespo 5 ай бұрын

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.

@nikbolding8716 4 ай бұрын

I have the same problem

@igotslickshoes Жыл бұрын

Does it matter creating the templates with containers vs sections?

@LytboxStudio Жыл бұрын

It doesn’t. This will work the same with both.

@ilaw 3 ай бұрын

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.

@LytboxStudio 3 ай бұрын

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

@ilaw 3 ай бұрын

@@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!

@LytboxStudio 3 ай бұрын

@@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.

@HrvojeLivnjak Жыл бұрын

Jeff, I'm using pop up to create a slide menu for mobile. Is that a bad practice for SEO?

@LytboxStudio Жыл бұрын

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.

@HrvojeLivnjak Жыл бұрын

@@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 :)

@dragon3602010 2 ай бұрын

isn't easier with popups in elementor like that we don't need javascript ?

@LytboxStudio Ай бұрын

Yep, it's easier, but this is better for SEO. All depends on the projects to choose the best method that fits.

@lipsunglassesaustralia8483 17 күн бұрын

Mine will not scroll - any suggestions?

@P4TTT Жыл бұрын

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.

@expressisverbis854 Жыл бұрын

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?

@abhishekgarg1030 8 ай бұрын

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

@LytboxStudio 7 ай бұрын

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

@somelethalart 4 ай бұрын

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!

@LytboxStudio 4 ай бұрын

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) kzfaq.info/get/bejne/gM13gayKuLjDmqc.html

@somelethalart 4 ай бұрын

@@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!

@LytboxStudio 4 ай бұрын

@@somelethalart will definalty need some js. You can use the js in the other video I shared and modify it for checkboxes.

@Bukanderivia 6 күн бұрын

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; } }); }); });

@Hann-h3s 2 ай бұрын

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?

@LytboxStudio Ай бұрын

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

@thc5440 Жыл бұрын

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.

@LytboxStudio Жыл бұрын

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/

@finnplancke1419 11 ай бұрын

my hamburger icon won't show up when I save the HTML & CSS

@LytboxStudio 11 ай бұрын

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/

@BUHOCRM Жыл бұрын

When clicking the link you want to be taken to, this screen does not close. How can I solve it ?

@siqbee-web-developer-designer 4 ай бұрын

Have you found the solution to it?

@iziriz Жыл бұрын

Show only shortcode if on mobile tap on menu)

@HeidiiiGbg Жыл бұрын

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.

@HeidiiiGbg Жыл бұрын

I have the Hello theme and used the Nav menu widget and code.

@LytboxStudio Жыл бұрын

Can you share a link? I can take a quick look

@HeidiiiGbg Жыл бұрын

@@LytboxStudio where can I share the link? I think it’s getting deleted here

@Melissa_Lawrence Жыл бұрын

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

@Melissa_Lawrence Жыл бұрын

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 :(

@veyloz 4 ай бұрын

Please help me, in my Saved Templates menu the shortcode doesn't appear, how do I make it appear?

@LytboxStudio 3 ай бұрын

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