How To Customize And Style The Divi Mobile Menu

50 Comments

1. 

   Robi on August 4, 2020 at 10:11 am

   You are the best! So easy to learning with you. Tnx

   Reply
   • 

     Nelson Lee Miller (aka The Divi Teacher) Divi Adventure Club Member on August 5, 2020 at 1:22 pm

     Thank Robi, so glad you enjoy my videos! 🙂

     Reply
2. 

   Jacob on August 4, 2020 at 8:59 pm

   Love the post. I get so much out of your content. It’s so frustrating having the mobile menu size be determined by its column and not easily finding which selector to target. This post was exactly what I was looking for for my company website mobile menu. Wish ET would add the CSS targets to the query buttons. Would make CSS easier. Another menu to look at is the divicio[.]us Divi Mad Menu that just launched.

   Reply
   • 

     Nelson Lee Miller (aka The Divi Teacher) Divi Adventure Club Member on August 5, 2020 at 1:31 pm

     Hi Jacob, glad you like this and it is helpful! Thanks so much for the feedback! 🙂

     Reply
3. 

   Ejay on August 5, 2020 at 2:42 am

   Hey Nelson, thanks for sharing this! I just subscribed. Could you share how we can place a functional cart icon next to or above the hamburger icon in mobile?

   Reply
   • 

     Nelson Lee Miller (aka The Divi Teacher) Divi Adventure Club Member on August 5, 2020 at 1:40 pm

     Hi Ejay, glad to have you along! The cart icon shows when you have WooCommerce installed, so make sure you have that. Is there something beyond that you were referring to?

     Reply
4. 

   Lucia on September 16, 2020 at 11:12 am

   Thanks Nelson! I no longer google, I come straight to pee aye!
   Do you know if it is possible to make columns with the menu child links?

   Reply
   • 

     Nelson Lee Miller (aka The Divi Teacher) Divi Adventure Club Member on September 21, 2020 at 6:56 pm

     Hi Lucia, that’s so cool to hear! I’m so glad you find our stuff helpful!

     About the columns, I believe you mean having two menu items side by side on mobile, correct? You could try something like

     .et_mobile_menu ul li a {
     width: 50%;
     float: left;
     }

     Reply
5. 

   Jason Prater on September 18, 2020 at 3:48 pm

   Great tutorial! You had one before that showed how to add icons to the menu with ET and Font Awesome icons. Do you have any code to make that work with the mobile menus?

   Reply
   • 

     Nelson Lee Miller (aka The Divi Teacher) Divi Adventure Club Member on September 21, 2020 at 6:58 pm

     Hi Jason,
     Sure, you could target just the mobile menu if you want and use that in the code instead, like .et_mobile_menu ul li a

     Reply
     • 

       Jason Prater on September 22, 2020 at 12:08 am

       Yes, that does work. It works well with the Elegant Themes icons across all devices but it seems to have trouble with the Font Awesome icons on IOS mobile devices. In the mobile menu I just get a rectangle where the icon should be. Both work great on desktop though.

6. 

   theCreativeMind on November 15, 2020 at 12:14 pm

   great tutorial you have here on your site!

   Reply
   • 

     Nelson Lee Miller (aka The Divi Teacher) Divi Adventure Club Member on November 15, 2020 at 1:59 pm

     Thank you very much, I hope you find it helpful!

     Reply
7. 

   Erica on December 17, 2020 at 1:39 am

   Hi! Do you happen to have a guide for Divi menu not working on mobile? How to fix it?

   Reply
   • 

     Nelson Lee Miller (aka The Divi Teacher) Divi Adventure Club Member on December 18, 2020 at 1:28 pm

     Hi Erica,
     What is not working? If there is some bug please reach out to Elegant Themes. I usually only make guides for common issues.

     Reply
8. 

   denis on January 17, 2021 at 9:07 am

   hey 🙂 nice tut! one little thing. I am trying to align the menu items horizontaly so evrything is in a like line. i cant get it to work .-. any ideas?

   Reply
   • 

     Nelson Lee Miller (aka The Divi Teacher) Divi Adventure Club Member on January 19, 2021 at 3:33 pm

     Hi Denis,
     Could you give me some info about what you mean? You are trying to align mobile menu items in a horizontal line?

     Reply
9. 

   Patrick on March 8, 2021 at 7:04 am

   mine has truly conflicted with main menu settings and dosent seem to work no matter what i do

   Reply
   • 

     Hemant Gaba on April 3, 2021 at 6:14 pm

     I am so sorry to hear that. Could you please share the URL of the website and explain what you are trying to achieve with the Menu for better clarity?

     Reply
10. 

    Jorg on May 18, 2021 at 7:35 am

    Great content! Definitely helped adding some cool new features to the site. I played around with the code and managed to create a fullscreen dropdown menu on both desktop and mobile. Currently, the menu items are centered at the top… is there a way to move them down and put them centered in the middle of the page? Regardless of device…

    Thanks 😀

    Reply
    • 

      Hemant Gaba on May 26, 2021 at 5:45 pm

      We are glad that our guides are helping you in some way. Could you please share the URL of the page which has the Menu as that will make it easy to understand what you are exactly referring to?

      Reply
      • 

        Jorg on May 27, 2021 at 5:00 am

        Thanks for your reply 🙂

        Of course, website url is: zerotolaunch.nl

      • 

        Hemant Gaba on May 29, 2021 at 7:30 pm

        Please try this snippet:
        
.opened ul#mobile_menu1 {
display: flex !important;
flex-direction: column;
justify-content: center;
}
.et_mobile_menu{
padding: 0 !important;
}


        This will place the Menu Items in the center regardless of the screen size. Let us know if that helps.

11. 

    Janis McAdoo on May 23, 2021 at 8:40 pm

    Thank you so much for this tutorial! Exactly what I needed to style the hamburger menu on my Divi Theme Builder header. 🙂

    Reply
    • 

      Nelson Lee Miller (aka The Divi Teacher) Divi Adventure Club Member on June 1, 2021 at 8:01 pm

      That’s great, Janis, so happy to help!

      Reply
12. 

    Emma Paterson Divi Adventure Club Member on June 25, 2021 at 7:05 am

    Your tutorials are great – do you have anything around being able to click anywhere outside the menu to close it? We have been asked to use the mobile menu on desktop too, but to have the option to click any where on the page and not just the cross to close the menu.

    Reply
    • 

      Hemant Gaba on August 13, 2021 at 6:53 pm

      Could you please share the URL of the page for me to investigate further?

      Reply
13. 

    Dac on August 11, 2021 at 4:56 am

    Hi, great tutorial! I’m curious, is there any possibility to change the padding or the position of the hamburger menu? Thanks in advance.

    Reply
    • 

      Nelson Lee Miller (aka The Divi Teacher) Divi Adventure Club Member on August 11, 2021 at 12:06 pm

      Thank you! Can you be more specific? You want to move just the icon? And please share a link also.

      Reply
14. 

    wasim on September 10, 2021 at 3:36 am

    how to change divi theme mobile version sub menu color

    Reply
    • 

      Hemant Gaba on September 14, 2021 at 8:01 pm

      Could you please try the snippet given below and see if that helps?
      
@media all and (max-width: 980px){
#mobile_menu1 li ul.sub-menu{
background-color: #fff !important;
}

      #mobile_menu1 li ul.sub-menu li a{
color: #E09900 !important;
}
}


      You can change the color and the background-color in the above snippet as per your liking.

      Let me know how it goes. 🙂

      Reply
15. 

    Crawford Paul on September 10, 2021 at 4:18 pm

    Hi Nelson. Thanks for this tutorial. If I want to hide the 3rd level of the menu on mobiles what css would impact that?

    Reply
    • 

      Hemant Gaba on September 14, 2021 at 8:02 pm

      Hey Paul,

      Could you please share the URL of the website for me to investigate further on that?

      Reply
16. 

    David on December 7, 2021 at 9:16 am

    Hello, can I somehow disable that rolling down and rolling up animation when mobile menu is opened/close, please?

    Reply
    • 

      Hemant Gaba on December 25, 2021 at 7:33 am

      Hey David,

      Could you please share the URL for me to investigate further?

      Reply
17. 

    Chris on March 22, 2022 at 11:27 am

    Hi Nelson – great tutorial as always. When I tried to use the below code to change the mobile menu background color, it changed the desktop version too – is it intended to just change the mobile menu?

    /*edit the default Divi mobile menu header*/
    #main-header {
    YOUR CSS HERE
    }

    In fact, what I am actually trying to do is change the mobile menu color for one page only and leave it the other color for all pages. Is there a better way of coding this?

    Reply
    • 

      Hemant Gaba on April 5, 2022 at 8:16 am

      Hey Chris,

      Could you please share the URL of the page for me to write the exact code for you?

      Reply
18. 

    René on April 17, 2022 at 1:51 pm

    Hi Nelson

    Regarding making Parent menu text being clickable.

    @media (max-width: 980px){
    .tippy-popper {display: none !important;}

    Hope this hep with your post

    Reply
19. 

    Willy on August 2, 2022 at 8:45 am

    Hi Nelson!

    I managed to customize my desktop sub-menus thanks to your great explanation!!! Thank you for your work!!

    But I do struggle with my according mobile version of this menu. All the css applies to the whole menu and I can´t see where/how to differ between desktop / table / mobile. I watched your tutorial for the mobile menu but couldn´t find the answer there.

    I hope I could explain my problem and it would be great, if you´d could help!

    Thanks

    Reply
    • 

      Hemant Gaba on August 26, 2022 at 11:24 am

      Hey Willy,

      Could you please share the URL of the website? It will help me to understand the issue better.

      Reply
20. 

    Caroline on January 5, 2023 at 5:17 am

    Hi, Happy New Year!

    Just wondering if you can tell me how to make all Mobile Menu Parent Links bold please? Currently just 1 of the parent links is bold but I would like all parent links on mobiles to be bold please 🙂

    /*Divi mobile menu parent links*/
    .et_mobile_menu li a {
    YOUR CSS HERE
    }

    Thanks very much for your help,

    Caroline

    Reply
    • 

      Nelson Lee Miller (aka The Divi Teacher) Divi Adventure Club Member on February 6, 2023 at 11:13 am

      Sure, just use font-weight: bold;

      Reply
21. 

    Joanne on February 7, 2023 at 8:28 am

    Hi Nelson! I am having issues with making my mobile menu clickable to unfold the next layer of menu options… Is there a code that I can use for that?

    Reply
    • 

      Hemant Gaba on February 9, 2023 at 2:19 pm

      Hi Joanne!

      Could you please share the URL of the website? It will help me to understand the issue better.

      Reply
22. 

    Cecilia on September 3, 2023 at 5:33 pm

    Hi, I am a beginner with DIVI and I am having a problem getting to see the hamburger icon in the mobile and tablet forms. What can I do?
    Thanks
    Cecilia

    Reply
    • 

      Nelson Lee Miller (aka The Divi Teacher) Divi Adventure Club Member on September 4, 2023 at 3:34 pm

      I’m not sure, please reach out to Elegant Themes support about that.

      Reply
23. 

    Josh on September 7, 2023 at 10:42 am

    Hello – always find your stuff super helpful thank you!

    Could you advise around changing the weight of the burger icon? ie – I’d like a thinner burger/ three lines.

    Thanks!

    Reply
    • 

      Nelson Lee Miller (aka The Divi Teacher) Divi Adventure Club Member on September 7, 2023 at 10:40 pm

      Hi Josh,
      I’m not totally sure if it would work, but you can always try font-weight: bold; or change the icon completely.

      Reply
24. 

    Davidson mark on January 30, 2024 at 10:15 pm

    I am just exploring divi theme for a landscaping service in Regina and you helped me a lot to fix my menu items specially in mobile.

    I hope you can also show us how to customize the slider in a way that will overlap the body without breaking the design.

    Cheers!

    Reply
    • 

      Nelson Lee Miller (aka The Divi Teacher) Divi Adventure Club Member on February 2, 2024 at 1:29 am

      I’m glad to hear our resources have been helpful!

      Reply