How to Create a Divi Mobile Menu Collapse Effect

Поделиться
HTML-код
  • Опубликовано: 9 янв 2025

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

  • @vedang1234
    @vedang1234 4 года назад +1

    I am a new learner was having same trouble for my site.. it fixed it instantly!! Thanks great job!!

  • @calvintwilkins
    @calvintwilkins 4 года назад +2

    You are literally the Jesus Christ of the online DIVI community. Thank you for everything you do.

  • @JohnComley
    @JohnComley 5 лет назад +2

    Thanks, Josh! Absolutely TOP-DRAWER video! I will be buying your CSS course very soon, so please know that your generous giving has some payback!

    • @JoshHallco
      @JoshHallco  5 лет назад

      Thank you, John! Looking forward to having you in the course! Best to reach me at joshhall.co/contact if you have any questions!

  • @ginmacia169
    @ginmacia169 3 года назад

    Llevo dos días buscadon una solución a mi problema con el menú hamburguesa de Divi. Creé un menú con Theme Builder y ningún código CSS arreglaba mi problema. Pero gracias a tu vídeo pude arreglar el despliegue del menú para móviles. Gracias gracias gracias

  • @BrianaK
    @BrianaK 5 лет назад +1

    Thank you so much, I was able to create this for my mobile menu and customize.

  • @belikovajulia
    @belikovajulia 3 года назад

    So happy I found this tutorial, very helpful!

  • @Sbj448
    @Sbj448 3 года назад

    This works in 2021. Thanks for the clear instructions!

    • @JoshHallco
      @JoshHallco  3 года назад

      Awesome! Yeah it's still what I use on my site too :)

  • @OneDegreeLife
    @OneDegreeLife 3 года назад

    Wonderfu! My "live" menus were giving me letters instead of icons. Maybe it's how they render on iOS? Anyway, finally found some that did work. HUGE help for our non-profit site. THANKS!

  • @petern6391
    @petern6391 3 года назад

    Hi Josh, Thank you for this! I have a question how do I get this working for the mobile footer as well?

  • @HeatherFarris
    @HeatherFarris 4 года назад

    Josh, I'm wanting to recreate this but for a course menu for for desktop. Is there something slightly different that needs done in the code?

  • @wpsaiful
    @wpsaiful 4 года назад +2

    Thank you so much Boss,
    You made my day, Allah bless you

  • @RonKruiver
    @RonKruiver 4 года назад +2

    How can I use this trick on a mega-menu on a blogpost on which I have removed the main header and replaced it with a custom full width menu?

  • @JIMMYSBN
    @JIMMYSBN 3 года назад

    Thank you, I had it done, but what if you have too many items and they can't fit a page? How to make it scroll along? Could it be due to the fact that I have a sticky header?

  • @Hervelee1011
    @Hervelee1011 3 года назад

    Only can use in categories?How to create expand and Collapsing new Arrival product?

  • @sergiosantos8854
    @sergiosantos8854 4 года назад

    Hey Josh. Very good tutorial. Thanks. So I'm trying to do the same thing with the custom vertical desktop main menu. So far I haven't managed to apply the same logic as your tutorial. Could you give me an idea to resolve this?

  • @sebastiangewald4524
    @sebastiangewald4524 4 года назад

    Thank you! Vielen Dank! Toller Code der wunderbar funktioniert, gut erklärt!

  • @eldrinjaychitlibrea7455
    @eldrinjaychitlibrea7455 4 года назад

    Thank you so much for this! It worked! Awesome!

  • @philipposadamou6445
    @philipposadamou6445 4 года назад +1

    Could somebody help me?
    This code does not work on the website I am working on because I don' t use the divi main header, but I created a global header using theme builder. It seems that the css code points to #main-header. How the codes shall be modified. Moreover I would like to ask where I can put the css since I don't know how to create child theme yet.
    Thanks

  • @aleskomarek
    @aleskomarek 5 лет назад

    Thank you. This was exactly what I needed.

  • @rickarden7731
    @rickarden7731 4 года назад +2

    Hi Josh, This worked for a while but once I started using Divi 4.0 and the Global Header feature this now does not work. I was wondering if anyone has a fix. Thanks for any help.

    • @ssaarroo100
      @ssaarroo100 3 года назад

      did you manage to put in header feature?

  • @rubencanodiaz
    @rubencanodiaz 4 года назад

    Hello Josh please can help me, how can move a sidebar woocommerce, to the top menu on mobile view ?

  • @yucelkantarci
    @yucelkantarci 4 года назад

    This video saved my life
    Thanks..

  • @benjaminleavitt3666
    @benjaminleavitt3666 4 года назад +2

    how do I make the items expand when users click on the menu item name, and not just the plus icon?

    • @DavidKorsa
      @DavidKorsa 4 года назад +1

      Im looking for same thing long time and no one answered me this question yet...

  • @alainpatry
    @alainpatry 5 лет назад

    Very cool - I notice however that expanding one menu on mobile does not collapse the other one presently open. Do you know how this could be tweaked?

  • @JIMMYSBN
    @JIMMYSBN 3 года назад

    thank you so much you saved me here!

  • @christopherko6649
    @christopherko6649 3 года назад

    I was using the non-theme builder method and it was working great. Has anyone experienced issues with the sub-menus no longer collapsing on mobile with the jquery changes? Has anyone found a solution if the same issues have occurred for you?

  • @yasukevicious5738
    @yasukevicious5738 4 года назад

    nice ! but where you put code of icon ? sorry for this "simple" question, but my english is not good

  • @shamnagmote3417
    @shamnagmote3417 4 года назад

    Thank you it helped a lot🖤

  • @regiestry6575
    @regiestry6575 2 года назад

    Hi, is there a way to make the parent link, clickable too? thanks!

  • @camilobermudez96
    @camilobermudez96 3 года назад

    Excellent. Thanks you

  • @17aig
    @17aig 4 года назад

    Hi Josh any reason it is not working on my new site any changes I made sure all copied and paste as it should and in the right places hard refresh nothing thanks in advance for your help

  • @Fodi_be
    @Fodi_be 4 года назад

    Great stuff, thanks a lot. It's much more elegant than the similar solution that Elegant Themes suggested themselves (no pun intended).

  • @RaaneiPL
    @RaaneiPL 2 года назад

    Everything is great, but the menu only expands when you click on the icon.
    Is there a possibility that clicking on the caption will also expand the section?

  • @mapfoundationorg
    @mapfoundationorg 4 года назад +1

    wher can we get the icon

  • @Itshowtovideos
    @Itshowtovideos 4 года назад

    Very helpful. Thanks

  • @mustafak4378
    @mustafak4378 3 года назад

    How can i make the submenu expand on mobile by pressing on a menu item with a custom link of # instead of pressing the icon??

  • @rk_saiful
    @rk_saiful 4 года назад +1

    If I use divi builder for header or menus it not working on there... Can you give me a solution please

    • @JoshHallco
      @JoshHallco  4 года назад

      Yeah this doesn't work for the theme builder. Working on a solution for that. This was pre-theme builder.

    • @rk_saiful
      @rk_saiful 4 года назад

      @@JoshHallco I always watching you video.... Can you make a video for pre-theme builder collaps menu

  • @yvonnevanleeuwen-AimCreative
    @yvonnevanleeuwen-AimCreative 3 месяца назад

    as at 26 sept 2024 it doesnt seem to be working. I've copied for the theme builder as per your updated blog, and copied the jquery below it, but when i check on mobile device, the hamburger icon becomes unclickable.

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

      I still use this on both joshhall.co and webdesignerpro.com - both work fine. Not sure on your end...maybe clear cache??

  • @muhammadbinzeeshan2504
    @muhammadbinzeeshan2504 4 года назад

    these icons are appearing on right side. but I want to these icons on the left. because I am creating website in RTL language. Please guide how to do it?

  • @misschief.artist6954
    @misschief.artist6954 3 года назад

    It worked on one of my sites but not the other and I have no ide what went wrong

  • @AlotoSumi
    @AlotoSumi 3 года назад

    ''Thank you'' should say it all

  • @DanaBeachResort
    @DanaBeachResort 4 года назад

    I added these codes on 2 different divi websites and in both of them the sub-menus disappeared. I dont know what i am doing wrong bcoz its a simple copy/paste code..Can you pls help me Josh

  • @sarajavid237
    @sarajavid237 5 лет назад

    Dear Josh, I made some websites and translated them page by page with ( ___Divi 4.0___ ) It means I have 2 menus ( 1- English 2- Persian ). My original pages is English (LTR: left to right), but my Persian language is (RTL: right to left) . My problem is direction menu on mobile & tablet view. I didn't find video about that. I just find _Divi Mobile Menu Collapse Effect _ it is good for (LTR). Could you please help me! I think I should use one code for (LTR) direction and also other code for (RTL) direction with a different Menu Name, But I can't do that . Thanks.

  • @janrafflim9139
    @janrafflim9139 3 года назад

    THANKS!

  • @XxWacadexX
    @XxWacadexX 2 года назад

    doesn't work on my online shop :(

  • @ignitemedia7219
    @ignitemedia7219 5 лет назад

    Where can I find the icon list?

    • @JoshHallco
      @JoshHallco  5 лет назад

      Link in the post!

    • @jacobwonder6735
      @jacobwonder6735 5 лет назад

      www.elegantthemes.com/blog/resources/elegant-icon-font

    • @jacobwonder6735
      @jacobwonder6735 5 лет назад +1

      His website is really nice actually, I am shocked how helpful he is for free, Definitely consider taking some/one of his classes.

    • @JoshHallco
      @JoshHallco  5 лет назад

      @@jacobwonder6735 thank you! Hit me up if you have any questions at joshhall.co/contact/

    • @halimivan9791
      @halimivan9791 5 лет назад

      elegantthemes.com/blog/resources/elegant-icon-font

  • @richardgilbert438
    @richardgilbert438 4 года назад

    Thanks man - Great content shame your course is so expensive.

    • @JoshHallco
      @JoshHallco  4 года назад

      Not sure which course you're referencing but the big thing to remember is that it's an investment in yourself to make a huge ROI over and over and over again. A lot of my students are now making 6-figures and beyond and have been very vocal about what a worthwhile investment my courses are for them. You can always go for one of my lower end courses to work up to the business course if that's what you're mentioning!

  • @MB-sl8pw
    @MB-sl8pw 5 лет назад

    Will this work on divi 4 mobile menu?

    • @gabrieldenys2941
      @gabrieldenys2941 5 лет назад

      theme builder changing class names. See this divi.help/threads/collapse-submenu-items-in-the-mobile-menu.3584/

    • @sarajavid237
      @sarajavid237 5 лет назад

      No, it doesn't work on Divi 4. If you find any code , please let me know! thanks

    • @gabrieldenys2941
      @gabrieldenys2941 5 лет назад

      @@sarajavid237 i posted it above?

    • @sarajavid237
      @sarajavid237 5 лет назад

      @@gabrieldenys2941 I try it your link now , it is not working too.

    • @gabrieldenys2941
      @gabrieldenys2941 5 лет назад

      @@sarajavid237 worked for me just fine with latest Divi

  • @nansharua5126
    @nansharua5126 5 лет назад +2

    This code doesnt work for me

    • @gabrieldenys2941
      @gabrieldenys2941 5 лет назад

      If you have Divi 4 then see divi.help/threads/collapse-submenu-items-in-the-mobile-menu.3584/

  • @lantechbd
    @lantechbd 4 года назад

    Great!

  • @PedroMartinez-nl1gr
    @PedroMartinez-nl1gr 4 года назад

    I'm an avid follower of your channel, to me is the "go-to Divi bible", and was so happy to see your video on Divi mobile menu, which by the way Divi should fix this crappy code been waiting 3 years, anyhow it didn't work for me. I'm not sure if is because my Divi is set up in a Network and to access Divi child CSS I have to go outside Divi Theme I'm using, but I even dropped it in the theme customizer and nothing happened. Also, forgot to mention I'm using a "Global Header" not sure if this affects the outcome of the code. What do you, or anyone reading this, think is wrong? Thank you
    Semper Fi

    • @JoshHallco
      @JoshHallco  4 года назад +1

      I plan to add some code to the post THIS WEEK that will work with the theme builder!

    • @PedroMartinez-nl1gr
      @PedroMartinez-nl1gr 4 года назад

      @@JoshHallco Thank you so much, really appreciate all your effort. PM

  • @joaoventura1722
    @joaoventura1722 3 года назад

    NICE JOB! Option 1 no successful, but Option 2 its OK

  • @chrisbenn
    @chrisbenn 2 года назад

    WHat if you just want to make a Collapsable "desktop" menu? NOT mobile....

  • @ranaaddi9841
    @ranaaddi9841 3 года назад

    Need your help facing some problem but not know how to solve it the main problem is your css code is working well but when ever I wants to add java script code I am not able to do that because the theme builder did not save that when I wants to save code without these tags the theme saves the code but it seems sove errors and disturbance in my website. You can see my website codefossils.com/ and can you please help me in solving my problem. Really unable to solve that As I don't have any knowledge of javascript so that I am unable to get what I want.........
    Waiting for you

  • @palarthur
    @palarthur 4 года назад

    top