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

Поделиться
HTML-код
  • Опубликовано: 2 июн 2024
  • Link to the code snippets for Elementor Slide Out Menu 👇
    lytboxacademy.com/slide-out-m...
    ===================================
    🟣 ////// Learn Powerful SEO for WordPress
    lytboxacademy.com/seo-for-wor...
    ===================================
    🟢 ////// Master Elementor with Better Designs
    lytboxacademy.com/design-with...
    ===================================
    🔵 ////// Learn to Build and Sell WordPress Maintenance & Care Plans
    lytboxacademy.com/maintenance...
    ===================================
    🏆 ////// Become a Lytbox Pro Member
    lytboxacademy.com/the-academy/
    ===================================
    🌟 ////// Personal 1-On-1 Elementor Training
    tidycal.com/lytbox/elementor-...
    ===================================
    ////// The Hosting I use:
    👉 Hostinger (Best for beginners & smaller budgets)
    www.hostg.xyz/SHDX8
    👉 Cloudways (Best for scaling web businesses)
    www.cloudways.com/en/?id=485185
    👉 RunCloud (Best for professionals)
    runcloud.io/
    ////// WordPress Tools I use:
    👉 Bricks Builder
    bricksbuilder.io/
    👉 Elementor
    be.elementor.com/visit/?bta=4...
    👉 Breakdance
    breakdance.com/ref/390/
    👉 Crocoblock
    crocoblock.com/?ref=2021
    👉 SEOPress Pro
    www.seopress.org/?ref=854
    👉 Perfmatters
    perfmatters.io/?ref=1230
    👉 WP Umbrella
    wp-umbrella.com/?fpr=jeffrey83
    👉 InstaWP
    instawp.com/?via=jeffrey
    ⏰ 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
  • ХоббиХобби

Комментарии • 184

  • @webprimedesign
    @webprimedesign Год назад +13

    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
      @UNIWASH-AB 7 месяцев назад

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

  • @bySterling
    @bySterling Год назад +5

    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
      @LytboxStudio  Год назад +1

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

  • @benkilowhiskey
    @benkilowhiskey 7 месяцев назад

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

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

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

  • @DigitalAdvanceNetwork
    @DigitalAdvanceNetwork Год назад

    Great tutorial!!! Thanks for sharing!

  • @macropsialberto
    @macropsialberto 2 месяца назад +1

    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
      @LytboxStudio  Месяц назад

      Thank you so much for this! 🙏

  • @DickDollars
    @DickDollars Год назад

    Your content is gold! Thank you

  • @pedromiguelpagan-rivera8970
    @pedromiguelpagan-rivera8970 Год назад

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

  • @Javiergcrespo
    @Javiergcrespo 3 месяца назад

    Great tutorial, thanks man. !

  • @SamWereb
    @SamWereb Год назад +2

    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.

  • @CryptonXplorer
    @CryptonXplorer 7 месяцев назад

    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!

  • @primalscream40
    @primalscream40 Год назад +1

    just what i needed for my project. Thanks

  • @srhadden
    @srhadden Месяц назад +1

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

  • @elev8tdwebdesign
    @elev8tdwebdesign 6 месяцев назад

    Exactly what I needed, thank you

  • @Purcella13
    @Purcella13 Год назад

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

  • @EyadSammour
    @EyadSammour Год назад

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

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

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

  • @pearloftheocean2269
    @pearloftheocean2269 6 месяцев назад

    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.

  • @fivedays68
    @fivedays68 Год назад +1

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

  • @estudiocrow
    @estudiocrow Год назад +1

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

    • @LytboxStudio
      @LytboxStudio  Год назад

      Thanks! 🙏

    • @estudiocrow
      @estudiocrow Год назад +1

      @@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
      @LytboxStudio  Год назад

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

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

  • @hanspaulpons5128
    @hanspaulpons5128 Год назад

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

  • @andrunistor4433
    @andrunistor4433 Год назад +2

    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
      @FredericoPeres Год назад +1

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

    • @backpackcruiser1509
      @backpackcruiser1509 10 месяцев назад

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

  • @farizg
    @farizg Год назад

    Awesome! Thank you!

  • @DEBUGENTITY
    @DEBUGENTITY 6 месяцев назад

    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.

  • @UrielSoto
    @UrielSoto Год назад +1

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

    • @LytboxStudio
      @LytboxStudio  Год назад

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

    • @UrielSoto
      @UrielSoto Год назад +1

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

  • @vmiyeli
    @vmiyeli Год назад +1

    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
      @johncolombo885 3 месяца назад

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

  • @tilemachosmanos2606
    @tilemachosmanos2606 Год назад +1

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

  • @fabrictexture4767
    @fabrictexture4767 Год назад +1

    Jeffrey Nice, informative tips...!!

  • @dei1106
    @dei1106 Год назад

    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!

  • @JS-ix4kv
    @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?

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

  • @discussingsplinterlands7728
    @discussingsplinterlands7728 9 месяцев назад +1

    Great video! Thanks!

  • @Kazoompie
    @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

  • @TimDuppen
    @TimDuppen 6 месяцев назад

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

  • @dvrkcanis9373
    @dvrkcanis9373 9 месяцев назад +1

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

  • @susangemayel-tapper3794
    @susangemayel-tapper3794 Год назад

    thanks for a great tutorial

  • @cormacmcclafferty
    @cormacmcclafferty 5 месяцев назад +1

    @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
      @LytboxStudio  5 месяцев назад +1

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

  • @comleonmoto
    @comleonmoto Год назад +1

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

    • @LytboxStudio
      @LytboxStudio  Год назад +1

      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
      @comleonmoto Год назад

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

  • @pleuratpllana
    @pleuratpllana Год назад +1

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

  • @whatthefuck4982
    @whatthefuck4982 Год назад

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

  • @expressisverbis854
    @expressisverbis854 10 месяцев назад

    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?

  • @yvessoke8558
    @yvessoke8558 6 месяцев назад

    Awesome, thanks

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

  • @sekawantiabintunyasaa182
    @sekawantiabintunyasaa182 10 месяцев назад +1

    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

  • @ayoubchakri7555
    @ayoubchakri7555 Месяц назад +1

    Thank you 🙏🏻🙏🏻🙏🏻

  • @szaszcsaba
    @szaszcsaba Год назад +3

    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.

  • @backpackcruiser1509
    @backpackcruiser1509 10 месяцев назад

    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
      @LytboxStudio  10 месяцев назад

      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
      @bekircanaydn9029 10 месяцев назад

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

  • @aslike4me
    @aslike4me Год назад +1

    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
      @LytboxStudio  Год назад +1

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

    • @christiannyirenda186
      @christiannyirenda186 4 месяца назад

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

  • @beastmodestudios7043
    @beastmodestudios7043 6 месяцев назад +1

    THANKS A LOT MAN !!!

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

  • @HammasUsman
    @HammasUsman 10 месяцев назад

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

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

  • @noragray1956
    @noragray1956 Месяц назад +1

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

    • @LytboxStudio
      @LytboxStudio  Месяц назад

      I have another video on making the menu close for anchor links - ruclips.net/video/JgGNIYSR_js/видео.html

  • @unityvisionro
    @unityvisionro Год назад +1

    very helpful!

  • @user-ww9zl9jw5x
    @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.

  • @thibaudherbert3144
    @thibaudherbert3144 Год назад +4

    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 !

  • @raphaelduzentos
    @raphaelduzentos Год назад +1

    Thanks Jeffrey

  • @ThomasSogos
    @ThomasSogos 16 дней назад +1

    @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
      @LytboxStudio  16 дней назад +1

      I do got a fix! It's here in this tut - ruclips.net/video/JgGNIYSR_js/видео.htmlsi=26AosOka8m7yxauR

    • @ThomasSogos
      @ThomasSogos 15 дней назад +1

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

  • @nickasbell296
    @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
      @Tserang 8 месяцев назад

      Same problem on some sites

    • @TPat1916
      @TPat1916 3 месяца назад

      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

  • @Adam-yq3ug
    @Adam-yq3ug 2 месяца назад +2

    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!

  • @alfonshere
    @alfonshere 4 месяца назад

    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
      @TPat1916 4 месяца назад +1

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

  • @hanitabadzong9470
    @hanitabadzong9470 14 дней назад

    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?

  • @user-jt4pl6si3i
    @user-jt4pl6si3i 10 месяцев назад

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

  • @wpeasy
    @wpeasy Год назад +1

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

  • @ilaw
    @ilaw Месяц назад +1

    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
      @LytboxStudio  Месяц назад +1

      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
      @ilaw Месяц назад +1

      @@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
      @LytboxStudio  Месяц назад +1

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

  • @andrejabur2822
    @andrejabur2822 8 месяцев назад +1

    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
      @zerothcore3220 4 месяца назад

      i have the same issue have you found a solution?

    • @andrejabur2822
      @andrejabur2822 4 месяца назад

      @@zerothcore3220 unfortunately not :/

  • @santtuluoma
    @santtuluoma Год назад +2

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

    • @juanorttega
      @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

  • @dragon3602010
    @dragon3602010 25 дней назад +1

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

  • @EndierMX
    @EndierMX 5 месяцев назад

    our are the best!!!!!

  • @HrvojeLivnjak
    @HrvojeLivnjak Год назад +1

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

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

  • @pixelstagart
    @pixelstagart Год назад

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

  • @somelethalart
    @somelethalart 2 месяца назад +1

    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
      @LytboxStudio  2 месяца назад

      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)
      ruclips.net/video/JgGNIYSR_js/видео.html

    • @somelethalart
      @somelethalart 2 месяца назад

      @@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
      @LytboxStudio  2 месяца назад

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

  • @Javiergcrespo
    @Javiergcrespo 2 месяца назад +1

    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.

  • @popii8636
    @popii8636 9 месяцев назад +2

    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.

  • @igotslickshoes
    @igotslickshoes Год назад +1

    Does it matter creating the templates with containers vs sections?

    • @LytboxStudio
      @LytboxStudio  Год назад

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

  • @abhishekgarg1030
    @abhishekgarg1030 5 месяцев назад

    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
      @LytboxStudio  5 месяцев назад +1

      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

  • @thc5440
    @thc5440 Год назад +1

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

  • @fatjay9402
    @fatjay9402 10 месяцев назад +4

    Doesnt work anymore because NAV Menu is gone

  • @BUHOCRM
    @BUHOCRM Год назад

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

  • @veyloz
    @veyloz 2 месяца назад

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

    • @LytboxStudio
      @LytboxStudio  Месяц назад

      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

  • @HeidiiiGbg
    @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
      @HeidiiiGbg Год назад

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

    • @LytboxStudio
      @LytboxStudio  Год назад

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

    • @HeidiiiGbg
      @HeidiiiGbg Год назад

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

  • @camilaroseferreira9743
    @camilaroseferreira9743 Год назад

    My menu isn't working in Firefox (it's not showing up at all). Thoughts??

    • @LytboxStudio
      @LytboxStudio  Год назад +1

      I’m checking it out on my side. Must be some updates in El. I’ll have an update soon here

    • @camilaroseferreira9743
      @camilaroseferreira9743 Год назад

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

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

  • @Melissa_Lawrence
    @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
      @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 :(

  • @finnplancke1419
    @finnplancke1419 9 месяцев назад +1

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

    • @LytboxStudio
      @LytboxStudio  9 месяцев назад

      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/

  • @seanjones
    @seanjones Год назад +1

    Any way to stop the page from being scrollable when the menu is open?

    • @LytboxStudio
      @LytboxStudio  Год назад +1

      There is but it would require some JS. I’ll the blog shortly and add a JS snippet

    • @seanjones
      @seanjones Год назад

      Thank you, let me know when you’ve added it if you can, that’d be really helpful

    • @Valerik92
      @Valerik92 Год назад

      @@LytboxStudio thanks a lot, i would love to try that too

    • @pixelstagart
      @pixelstagart Год назад

      @@LytboxStudio did you manage to add this yet Jeffery? Would be really helpful :)

    • @konstantinosntamadakis9439
      @konstantinosntamadakis9439 11 месяцев назад

      ​@@pixelstagart I find a workaround, if you still using it let me know

  • @iziriz
    @iziriz 10 месяцев назад

    Show only shortcode if on mobile tap on menu)

  • @stribormarincic9129
    @stribormarincic9129 Год назад +1

    Why not just use popup feature that comes with elementor and trigger it on humberger icon?

    • @LytboxStudio
      @LytboxStudio  Год назад

      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.

    • @SamWereb
      @SamWereb Год назад +1

      Popup blockers in the browser

    • @michiel4551
      @michiel4551 Год назад +1

      @@LytboxStudio just a thought.. cant the seo issue be fixed by having a menu in the footer?

    • @stribormarincic9129
      @stribormarincic9129 Год назад +1

      @@LytboxStudio When working with Sections you can label the section as NAV, don't know if that helps of you are working with popup

    • @LytboxStudio
      @LytboxStudio  Год назад

      @@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
      ruclips.net/video/THL-_3CYlDU/видео.html and SEO for WordPress with Elementor Websites (Part 1 Updated)
      ruclips.net/video/DDmGBCAAu7k/видео.html

  • @Tserang
    @Tserang 8 месяцев назад

    its not working smooth anymore
    maybe because of updates of elementor? we need an updated videoo

    • @LytboxStudio
      @LytboxStudio  8 месяцев назад +1

      It could be another plugin or something else that changed. If you go to my blog post with the code, you’ll now see a “live example” link at the top. Check it out and see how it works with the updated version of Elementor. I have been updating the code snippets to keep everything up to date. If you do find a bug or need help, please use the comments in the blog posts, I can support better there than in YT comments. Cheers!

  • @user-ph5pq5tr1o
    @user-ph5pq5tr1o Год назад

    Not Working

  • @nicolenixxon
    @nicolenixxon Год назад +1

    The similar problem occurred on my eCommerce website. ElementsReady Elementor Addons helped me to find the solution. I believe it can also resolve your problem.

  • @bekircanaydn9029
    @bekircanaydn9029 10 месяцев назад

    Solution for non-scrollable body JS code ;
    document.addEventListener("DOMContentLoaded", function() {
    var navControl = document.querySelector(".lytbox-nav_control");
    if (navControl) {
    navControl.addEventListener("change", function() {
    if (this.checked) {
    document.body.style.overflow = "hidden";
    } else {
    document.body.style.overflow = "";
    }
    });
    }
    });
    You welcome :)

    • @davidlyon537
      @davidlyon537 10 месяцев назад

      Hey, where does this code go?

    • @bekircanaydn9029
      @bekircanaydn9029 10 месяцев назад

      @@davidlyon537 add a custom html snippet from elementor shortcodes and add it with Script tag

    • @Stath1s_K
      @Stath1s_K 3 месяца назад +1

      Thank you so much!

  • @frozenfrog777
    @frozenfrog777 9 месяцев назад

    Hi everyone,
    What would be the most common reason for the mobile nav button failing to show up on the mobile after all the steps have been completed?

    • @LytboxStudio
      @LytboxStudio  9 месяцев назад

      I would have to see to be sure, 1 reason could be the z-index.
      I’ve now got comments on the blog post set up to better help. You can share either a link or a Loom video there and I can take a look - lytboxacademy.com/slide-out-mobile-menus-for-elementor/

    • @frozenfrog777
      @frozenfrog777 9 месяцев назад

      I set it at 1000. Should I try to set it higher? @@LytboxStudio

  • @WickyDesign
    @WickyDesign Год назад +2

    Awesome tutorial! Thanks for sharing!