How To Show An Open Divi Menu On Mobile Instead Of The Hamburger Icon Tutorial by Pee Aye Creative

How To Show An Open Divi Menu On Mobile Instead Of The Hamburger Icon

This quick Divi tutorial and code snippet will show you how to easily change the Divi mobile hamburger menu into an open menu like on desktop.

FYI: You can do this with a setting directly in the Divi Builder with our popular Divi Responsive Helper plugin! Take a look, it is so easy!

Divi Responsive Helper by Pee Aye Creative 2.2

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Show Divi Desktop Menu On Mobile

As I mentioned in the intro, there are many times when the hamburger menu is not idea. If you want to see this in action you can check out the demo of most of our Divi child themes that we have for sale.

The first step is to add a custom CSS class to the specific Menu module that you want to keep open on mobile. We do this so that the snippet does not affect all the menu modules, which allows us to choose which ones remain like normal and which ones are affected. Open the Divi Menu module settings and go to the Advanced tab. Got the CSS IDs & Classes toggle and find the CSS Class input field. Place the class “pa-open-mobile-menu” in the input field.

HINT: If you need help with any of this, be sure to watch the video!

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*show desktop menu on phone*/

@media (max-width: 980px) {
	.pa-open-mobile-menu .et_pb_menu__menu {
		display: flex!important;
	}
	.pa-open-mobile-menu .et_mobile_nav_menu {
		display: none!important;
	}
}

And that my friends is how to change the hamburger icon into an open menu! I really like this effect and hope you do too.

Want To Do The Oppposite?

We have a separate tutorial on how to change the normal menu into a closed hamburger icon menu on Desktop! You can even use this to show both a normal desktop menu AND a hamburger menu at the same time. Go check it out!

How To Show A Divi Mobile Hamburger Menu On Desktop YouTube Video Tutorial by Pee Aye Creative

Do It With A Setting!

Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!

Divi Responsive Helper by Pee Aye Creative 2.2
70

Last updated Jan 29, 2022 @ 11:58 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

59 Comments

  1. Naama

    Thank you so much

    Reply
  2. Anthony Ferrara

    Great hack! man, it’s working perfectly. Thanks buddy.

    Reply
  3. wael jallad

    Hi Nelson,
    I am a beginner in DIVI, some times I found DIVI is not flexible and capable in designing good looking websites. Accidentally I came across one of your tutorials in YouTube. A link in the video description took me to your website. let me admire the good looking of your website and the work you put in it . I was curious and would like to ask you, did you built your website using DIVI? or use DIVI with plugins or you bought a commercial theme from designing company from the internet? I subscribed to your channel and news paper and I love to have communication bridge with you.

    thanks
    Wael

    Reply
  4. Aleigha Mattison

    Your tutorials are so helpful, thank you! I used this on my site I’m working on. Only one issue because I have multiple menus stacked. With the drop down the text/border of the other menus shows through the background (I attached a photo below). Any tips to get rid of this? Thanks so much!

    Reply
    • Hemant Gaba

      Could you please share the URL of the page on which this issue is happening so that I can investigate further?

      Reply
      • Aleigha Mattison

        Yes, here you are just scroll down to procedures section and it’s there. Thank you so much! https://areteplasticsurgery.com/

      • Hemant Gaba

        The overlapping is occurring because the dropdown is set to absolute which is a default setting of the Menu item. There are two things that we can do here, first is to provide the gap of the dropdown between the modules and the second is to go to the Column Settings > Advanced > Position and increase the value of the z-index for each column. This will show the dropdown content clearly.

      • Aleigha Mattison

        Thank you so much!! Worked beautifully.

  5. sandro

    Beautiful tutoring!
    Quick question, how do you do with header menu to reach the : “Divi Menu module settings”. My only main menu is build on my Header. And somehow i can’t reach it. Any tips?
    Thanks

    Reply
    • Hemant Gaba

      I am afraid that I am not able to understand the issue that you are facing. Could you please elaborate on the issue a little more and provide us the URL of the page for our better understanding?

      Reply
      • Sandro

        Hi,
        So there are 2 steps.
        1) Open the Divi Menu module settings and go to the Advanced tab, custom CSS and paste : pa-open-mobile-menu

        2) paste the snippet there Divi>Theme Options>Custom CSS.

        Unfortunately, I can’t find the “Divi module settings” in order to type in the CSS

        http://www.sandrorupp.com

      • Hemant Gaba

        The steps that you have mentioned will work with the Theme Builder header or Custom Header but the header you are using is the Default Header so that these steps will not help. Please go to the Divi > Theme Options > Custom CSS and paste the code given below:

        @media all and (max-width: 980px){
        ul#top-menu {
        display: block !important;
        margin-top: 2em;
        }

        div#et_mobile_nav_menu {
        display: none !important;
        }
        #top-menu-nav{
        display: block !important;
        }
        }

        This code will show the Menu Items on the small screens as well. Let us know if that helps. 🙂

      • Sandro

        Wow that’s fabulous! Thanks a lot! any ways to change the size of the menu?

      • Hemant Gaba

        Could you please try using this code and see if that helps?

        @media all and (max-width: 980px){
        ul#top-menu li a{
        padding-bottom: 1em !important;
        font-size: 16px;
        }
        ul#top-menu li{
        padding-right: 10px;
        }
        }

        Let us know how it goes. 🙂

  6. Penot Véronique

    Hello,
    It doesn’t work on my site.
    Can you help me?

    Reply
    • Hemant Gaba

      Hi Sarah,

      Could you please try this snippet and see if that helps?

      @media all and (max-width: 980px){
      .et_pb_menu_0_tb_header .et_pb_menu__menu{
      display: block !important
      }

      .et_pb_menu_0_tb_header .et_mobile_nav_menu{
      display: none;
      }
      }

      Let me know how it goes.

      Reply
  7. Marjolein Poels

    Hi, I tried your solution, but what I’m facing is that next to the open menu, it also still shows the hamburger icon (in greyish color). This is only the case on some pages (the pages in which my shop items are listed (categories/shop pages), so I’m not really getting why it only malfunctions on these pages. Can you please help me?
    Kind regards,
    Marjolein

    Reply
    • Hemant Gaba

      Hey Marjolein,

      Could you please try this code and see if that helps?

      @media all and (max-width: 980px){
      .et_pb_menu__menu{
      display: block !important;
      }
      .et_mobile_nav_menu{
      display: none !important;
      }
      .et_pb_menu__wrap{
      justify-content: center !important;
      }
      }

      Let me know how it goes. 🙂

      Reply
  8. Sara

    Hallo,
    I read already a lot of your tutorials and they helped me a lot – thank you so much!
    However, I have an issue that drives me crazy… I have my open divi menu now at my mobile and that works, but it adds blank space on the right. That wouldn’t be an issue if I could set the horizontal scrolling to invisible. But when I do this, the drop down menu is not working anymore (I assume because it is behind the other elements then like you have it in an other tutorial).
    Do you know any help?

    Reply
    • Hemant Gaba

      Hey Sara,

      I have read your query and do provide you with any valid solution for the same, I could like to check the page where this issue is present so it would be great if you can share the URL of the page for me to investigate further.

      Reply
      • Flo

        Hi Hermant and Sara, I have the exact same issue than Sara. This solution works great but create horizontal navigation scroll bar on mobile. If I hide the overflow, then I can not see the dropdown on mobile. Any ideas? It’s the menu under the search bar here: florentfischer.com. Right not I have the horizontal and vertical overflow hidden on mobile in the Menu settings. Row and section are default.

      • Hemant Gaba

        Hey Flo,

        I cannot see the horizontal bar and also not able to see the overflow hidden property that you are using so could you please elaborate on where you have placed the property so that I see the issue?

      • Flo

        Hi Hermant,

        Thank you for responding.
        So after my header (blue background), I have this one global section with the search bar and the menu.

        Example 1: no change, the menu works great but there is the horizontal scroll bar and the extra white space on the right end side, see screenshot via link below:
        http://florentfischer.com/wp-content/uploads/2022/07/capture_default_dropdownOK_scrollbar-scaled.jpg

        Example 2: I set the section overflow to “hidden”, no more horizontal scrollbar and white space on the right, but the menu doesn’t display all the sections in the dropdown as I’m assuming they’re now
        “hidden”. See screenshot:
        http://florentfischer.com/wp-content/uploads/2022/07/capture_hidden_dropdownNOTOK_NOscrollbar2-scaled.jpg
        I tried to put the “hidden” in the row settings or menu settings but it didn’t work neither.

        Any ideas? Thanks,

        Flo

      • Hemant Gaba

        Hey Flo,

        I have checked the website and I cannot see any of the issue that you have mentioned in the comment so I am assuming that the problem is solved. Please let me know if you have any other query.

  9. Mercy

    This is great!

    One thing however is that the menu items aren’t stacking one of top of the other but rather going side by side.

    Any idea what I might be doing wrong?

    Reply
    • Hemant Gaba

      Hey Mercy,

      I have checked the website and the query you have asked seems completely different from the header that is placed on the website. Could you please guide me in the right direction so that I could help?

      Reply
  10. Meaghan

    Hi, thank you SO MUCH for this. I’m struggling with something, if you would be so kind to help… I only want my secondary menu to be open on mobile. My secondary menu is really just one link “My Account” in the top right of website. The main menu is the main navigation on the site. Right now my secondary and main menu are both hamburgers, and it looks weird. I want to keep the main menu humburgered. How do I open the secondary but keep the main closed? I tried adding “secondary-menu” in the code where “main-menu” was mentioned but that didn’t work (and I’m def not a developer, so not sure that would even work, was just trying things). Thank you so much!

    Reply
    • Hemant Gaba

      Hey Meaghan,

      Could you please use this code and let me know if that solves the issue or not?

      @media all and (max-width: 980px){
      .et_pb_menu_0_tb_header .et_pb_menu__menu {
      display: block !important;
      }
      .et_pb_menu_0_tb_header .et_mobile_nav_menu{
      display: none !important;
      }
      }

      Reply
      • Meaghan

        You are brilliant, thank you! It worked perfectly. Thank you so much

      • Hemant Gaba

        You’re welcome, I’m glad that it worked. 🙂

  11. Jay Toffoli

    How can I get the menu items to stack in a list format?

    Reply
  12. Ann

    Thank you very much for this tutorial.
    I have the problem with the submenus on my mobile phone. The submenus are opened next by, but there is no space to get to this submenu. Do you know any advice?

    Reply
    • Hemant Gaba

      Hey Ann,

      I saw the issue and here we can adjust the position of the submenu to keep it inside the screen. Could you please try this code and see if that helps?
      #menu-hauptmenue-1 ul.sub-menu {
      left: -70px !important
      }

      Place this code in Divi > Theme Options > Custom CSS Panel.

      Reply
      • Ann

        With -40px it was perfect for my case, thank you so much!

      • Hemant Gaba

        I am glad that the issue is resolved now. Please let us know if you need any further assistance. 🙂

  13. morgan

    not working for me when adding css on the module, or to the page or the the additional CSS of theme customize

    Reply
  14. pablo Scarone

    Hi Nelson,
    Can you add to this:

    1- Stack the menu items vertically
    2- Can show a custom icon before each menu item instead of a bullet
    3- All menu items align center (horizontally)
    4 -Adjust padding between each menu item

    Thank you

    Reply
      • pablo Scarone

        can you post the links here please

      • Nelson Lee Miller (aka The Divi Teacher)

        Yes of course, they are both different. The first one opens the menu, the second one is how to make it vertical on desktop. If there is something you are unable to achieve, you are welcome to hire a developer to help you get this fixed.

      • pablo Scarone

        Here is the answer from Elegant’s Theme Support.
        In addition to your code. to show the menu layout vertically and center here is the code:

        To correct your footer on mobile, Please, go to your WordPress Dashboard > Divi > Theme Options > Custom CSS and add the following:
        @media(max-width: 767px){
        ul#menu-footer-menu {
        flex-direction: column !important;
        gap: 20px;
        }
        ul#menu-footer-menu li {
        justify-content: center;
        }
        }

        They were very nice and quick to answer my request.

  15. ML

    I am using the code below and it works fine. I was wondering how I would tweek this to have the logo centered inlined logo In the theme customizer. I would like the mobile to match. Thanks in advance for your help with this matter.

    @media all and (max-width: 980px){
    ul#top-menu {
    display: block !important;
    margin-top: 2em;
    }

    div#et_mobile_nav_menu {
    display: none !important;
    }
    #top-menu-nav{
    display: block !important;
    }
    }

    Reply
    • Hemant Gaba

      Hey ML,

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

      Reply
  16. Josh

    Hi there…
    Thanks for helping others, but I have a week testing this and it doesnt work, so I setup a brand new site to see if you can help me …

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart