Menu, Mobile

10 Useful Code Snippets for your Divi Menu Mobile

Fabio Sarcona
October 26, 2018
CSS | Snippet | Styling
Share13
Tweet
Share
Pin2
15 Shares

There are several plugins that allow you to change the appearance of the Divi mobile menu, but what if you can make some customizations without using a plugin? You don’t like the drop-down menu and would like a Slide-in menu? Would you like the Divi Menu Mobile to stay sticky at the top? Or do you want to use a different logo for the mobile menu? For all these cases, there is a hack that allows you to customize your Divi Menu Mobile using only fragments of CSS code.

Basically, fragments of CSS/JS code are used to get specific features that might otherwise require a plugin and in this article, I listed 10 Useful Code Snippets for your Divi Menu Mobile.

Are you ready to find them out? Let’s get started!

1. Add background image to Divi mobile menu

With this snippet, you can add an image to the mobile menu. I’ve also added an overlay to improve the contrast of the text and get a better readability.

How to customize this code: All you have to do is replace the link of the image you see inside the brackets with the link of your image. Also if you want to change the color of the overlay, you just have to change the values of the color rgba, really very simple.

.mobile_nav.closed #mobile_menu, 
.mobile_nav.opened #mobile_menu {
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background: linear-gradient(
      rgba(66, 66, 66, 0.50),
      rgba(66, 66, 66, 0.90)
 ),url("https://divi-tutorials.creativechildthemes.com/wp-content/uploads/2018/10/mobile-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Result:

2. Making the mobile menu sticky

With this short snippet, your mobile menu will remain fixed at the top of the page.

Source code Divi Life

@media only screen and (max-width: 980px) {
.et_fixed_nav #main-header, 
.et_fixed_nav #top-header,
.et_non_fixed_nav.et_transparent_nav #main-header,
.et_non_fixed_nav.et_transparent_nav #top-header {
    position: fixed;
}
}
.et_mobile_menu {
    overflow: scroll !important;
    max-height: 80vh;
}

3. A different logo for the mobile menu

Sometimes it may be necessary to use a different logo for the mobile menu and this snippet does exactly that.

@media only screen and (max-width: 980px){
#logo {
content: url(INSERT HERE NEW LOGO IMAGE URL);
}
}

4. Add a shadow under the mobile menu

Want to add a shadow below the mobile menu? This snippet is what you are looking for.

@media only screen and (max-width: 980px){
#main-header {
    -webkit-box-shadow: 0 3px 50px rgba(0,0,0,.2);
    -moz-box-shadow: 0 3px 50px rgba(0,0,0,.2);
    box-shadow: 0 3px 50px rgba(0,0,0,.2);
}
}

Result

5. Adding text Before and After of the Hamburger Icon

If you want to add text before or after the hamburger icon of the Divi menu, this snippet is what you need.

I added two different versions of the code:

  1. In the first case the text will be to the right of the menu icon.
  2. In the second case the text is before the icon, the on the left.
.mobile_menu_bar:after {
 position: relative !important;
 content: 'MENU';
 bottom: 9px;
 left: 10%;
 color: #363636;
}

Result:

 
#et_mobile_nav_menu:before {
    content: 'MENU';
    font-size: 14px;
    position: absolute !important;
    bottom: 29px;
    right: 35px;
    color: #363633;
}

Result:

6. Change the hamburger icon to X when opened

A simple snippet to change the hamburger icon to X when the menu is open.

.mobile_nav.opened .mobile_menu_bar:before {
 content: '\4d';
}

Result:

7. Fullwidth style + Collapsing Nested Menu Items

This hack is a bit more complex than those listed so far but it allows you to add two very cool features to your mobile menu:

– The Fullwidth style
– Collapsing Nested Menu Items

The interesting thing is the possibility of grouping all the items in the submenu and hiding them with a Toggle function that allows you to get a more tidy and intuitive menu.

But unlike the solution proposed by Elegant Themes in his tutorial “Divi Mobile Menu Hack: Collapsing Nested Menu Items“, this hack makes clickable the parent link of the Submenu as well.

How to add this hack to your menu?
First of all, add the CSS code to your Divi site. You can add it to your Theme Options in the Custom CSS field or in your child theme.

@media screen and (max-width: 980px) {
 .container { 
 width: 100% !important;
 }
 .et_header_style_left .logo_container{
 padding-left: 25px;
 }
 .et_header_style_centered #main-header .mobile_nav {
 background-color: transparent;
 }
 .mobile_nav.closed .select_page {
 display: none;
 }
 .et-fixed-header#main-header {
 background-color: transparent !important;
 }
}
.et_mobile_menu {
 top: 0 !important;
 border-top: 3px solid #283fc0 !important;;
 background-color: #fff !important;
 padding: 20% 0;
}
.et_mobile_menu li a {
 text-align: center;
 font-size: .8em;
 border: 0;
 padding: 15px 0;
 letter-spacing: 1px;
}
.mobile_nav ul#mobile_menu .current_page_item > a {
 color: #283fc0;
}
.mobile_nav ul#mobile_menu li ul li a {
 font-size: .8em !important;
 margin: auto;
 color: #363636 !important;
 padding-top: 0.2em;
}
.et_mobile_menu li a:hover {
 color: #999;
 -webkit-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}
.mobile_menu_bar:before {
 padding-right: 25px;
 color: #363636 !important;
}
.mobile_nav.opened .mobile_menu_bar:before {
 content: "\4d";
 z-index: 99999;
}

/* NESTING MOBILE MENU SETTINGS */
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
 content: '\4d';
}

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after, 
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
 content: '5'; 
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
 position: relative; 
}

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
 position: absolute;
 background-color: rgba(0,0,0,0.03);
 z-index: 1;
 width: 36px;
 height: 36px;
 line-height: 36px;
 border-radius: 50%;
 top: 6px;
 right: 10px;
 cursor: pointer;
 text-align: center;
}

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
 background-color: rgba(0,0,0,0.1);
}

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
 font-family: "ETmodules" !important;
 font-weight: normal;
 font-style: normal;
 font-variant: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 line-height: 36px;
 font-size: 24px;
 text-transform: none;
 speak: none;
 content: '\33';
}

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
 content: '\32';
}

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
 display: none !important;
 padding-left: 0;
}

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
 display: block !important;
 background-color: rgba(0,0,0,0.03);
}

 #main-header #mobile_menu.et_mobile_menu li li {
 padding-left: 0;
}

#main-header #mobile_menu.et_mobile_menu li a, 
#main-header #mobile_menu.et_mobile_menu li li a,
#main-header #mobile_menu.et_mobile_menu li li li a {
 padding-left: 20px;
 padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children .sub-menu-toggle + a {
 padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
 background-color: transparent;
 font-weight: inherit;
}

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
 font-weight: bolder;
}

The second thing you need to do is add the JS code in the Integrations tab that you always find in the Theme Options (see screenshot below).

<script type="text/javascript">
(function($) {
 function setup_collapsible_submenus() {
 $( "<div class='sub-menu-toggle'></div>" ).insertBefore( "#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a" );
 $( "#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle" ).click(function () {
 $(this).toggleClass("popped");
 });
 }
 $(document).ready(function() {
 setup_collapsible_submenus();
 });
 $(window).load(function() {
 setup_collapsible_submenus();
 });
})(jQuery);
</script>

NOTE: Be careful to not cut part of the code while copying and pasting because even if you don’t have a single bracket, it may not make the menu work properly.

Result:

8. Slide-in Menu Mobile

A hack that you will surely love is the one that allows you to add a slide-in effect to the Divi mobile menu only with CSS code. No plugins, just pure CSS code that allows you to totally change the look of your Divi mobile menu.

If you’re interested in this hack, take a look at the tutorial I wrote and published on Needyesterday.

I’m sure you’ll find all 8 menu styles listed in the tutorial very interesting!

Link Tutorial: 8 new style for mobile menu of Divi

9. Divi Menu Mobile Centered and Centered Inline Like The Default Style

When using the Centered or Centered inline style for the Desktop menu, the layout of the mobile menu change as well. But with this hack you can apply the default layout while leaving the Desktop menu unchanged.

Source code from Divicio.

/* Make Divi Centered and Centered Inline Logo Header Bars Look Like The Default Header Bar On Mobile */
@media all and (max-width: 980px) {
/* align header container text to left */
    .et_header_style_centered #main-header .container,
    .et_header_style_split #main-header .container {
        text-align: left;
    }
/* set max width for logo container and bring it above the navigation bar to make it clickable */
    .et_header_style_centered header#main-header .logo_container,
    .et_header_style_split header#main-header .logo_container {
        position:relative;
        z-index: 2;
        max-width: 50%;
    }
/* move split header logo to left */
    .et_header_style_split header#main-header .logo_container {
        float: left;
    }
/* prevent the split header logo from shrinking by increasing its max width */
    .et_header_style_split #logo {
        max-width: 100%;
    }
/* adjust top navigation alignment */
    .et_header_style_centered #main-header div#et-top-navigation,
    .et_header_style_split #main-header div#et-top-navigation {
        position: absolute;
    }
/* make "select page bg color transparent" */
    .et_header_style_centered #main-header .mobile_nav,
    .et_header_style_split #main-header .mobile_nav {
         background-color: rgba(0, 0, 0, 0); 
    }
/* remove mobile_nav left and right padding */
    .et_header_style_centered #main-header .mobile_nav,
    .et_header_style_split #main-header .mobile_nav {
         padding: 5px 0px;
    }
/* remove unnecessary top margin */
    .et_header_style_centered #et_mobile_nav_menu,
    .et_header_style_split #et_mobile_nav_menu {
        margin-top: 0px;
    }
/* hide "select page" container */
    .et_header_style_centered #main-header .mobile_nav .select_page,
    .et_header_style_split #main-header .mobile_nav .select_page {
        display: none;
    }
/* adjust vertical and right alignment of the mobile menu bar */
    .et_header_style_centered #main-header .mobile_menu_bar,
    .et_header_style_split #main-header .mobile_menu_bar {
        position: relative;
        right: 0px;
        text-align: right;
    }
/* adjust dropdown menu top offset */
    .et_header_style_centered #main-header .et_mobile_menu,
    .et_header_style_split #main-header .et_mobile_menu {
        top: 63px;
    }
}

Before:

After:

10. How to change the label “select a page” for the centered menu style

This last snippet is useful if you use the “Centered” menu style and want to change the “Select a page” label. With very few lines of JS code, you can add your own custom label.

All you have to do is add this code to your Theme Options (as I have already shown you) and change the text “your-text-here” with the label you prefer. Very easy, right? 🙂

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".select_page").text("your-text-here");
});
</script>

Result:

Conclusion

We’ve come to the end of this article. As you can see with a few lines of code you can extend and improve the mobile menu of your Divi site without the use of plugins.

Have you already used one of this snippet or do you think some of it is missing?
Let me know in the comments.

I am Fabio Sarcona, a freelance Web Designer/Developer with more than 6 years of experience. I am also a Divi Expert author of various tutorials and founder of Creative Child Themes and Needyesterday.

Follow Me

75 Comments

  1. Pierre
    Pierre on November 7, 2018 at 7:35 am

    Hi Fabio :).

    Thanks for sharing that really cool snippets with us 😀 !!

    Reply
    • Fabio Sarcona
      Fabio Sarcona on November 7, 2018 at 2:41 pm

      Thanks a lot Pierre! are all snippets that I almost always use and are really useful

      Reply
      • LAurent
        LAurent on February 17, 2019 at 2:45 am

        GREAT ARTICLE!!

        Reply
        • Suffian Ahmed
          Suffian Ahmed on November 7, 2019 at 5:02 am

          Great tutorial Fabio, we really feel happy to use your sniper. Great work, expecting more for Global header and footer design and thank once again. Regards Webnoesys IT Solutions LLP

          Reply
  2. Elisandro Borges
    Elisandro Borges on November 7, 2018 at 2:36 pm

    Awesome collection, Fabio! Thanks a lot! I love Divi Snippets!

    Reply
    • Fabio Sarcona
      Fabio Sarcona on November 7, 2018 at 2:43 pm

      Thank you Elisandro! I really appreciate it 🙂

      Reply
  3. Joost Heikoop
    Joost Heikoop on November 9, 2018 at 3:40 am

    Very nice collection! As mentioned before… 😉

    Reply
    • Fabio Sarcona
      Fabio Sarcona on November 13, 2018 at 9:23 am

      Thank you Joost! I hope it’ll be useful for you 🙂

      Reply
  4. Debby
    Debby on November 9, 2018 at 6:25 am

    Thank you so much Fabio – these are so useful and time saving for me as someone with very basic coding knowledge. I always think the mobile menu is bland in Divi. Now I can zuzz it up 🙂

    Reply
    • Fabio Sarcona
      Fabio Sarcona on November 13, 2018 at 9:24 am

      Thanks to you Debby!
      they are all Snippets that I use myself for almost all my projects because I also don’t like the look of the Mobile Menu, so I thought to share this collection of Snippets

      Reply
      • Shahab
        Shahab on September 6, 2020 at 12:58 pm

        Hi , i have a problem , i see letter a 1 moment, when my mobile menu is loading , after 1 moment mobile menu boton appear ,…

        Reply
  5. Eli
    Eli on November 11, 2018 at 4:34 am

    Hello Fabio, really usefull thank you so much.
    A question: Is there a way to have another menu level (more sub-subcategories) that you can collapse but also clickable?
    Thank you in advance.

    Reply
    • Fabio Sarcona
      Fabio Sarcona on November 13, 2018 at 9:26 am

      Hi Eli!

      I’ve never tried because I never needed to create a double sub-menu, but probably it’s possible but we’ll need to modify the JS code because it currently only works with a sub-menu.

      Reply
  6. Rachel
    Rachel on February 14, 2019 at 10:04 am

    Where exactly is this code found when editing the theme? What section?

    Reply
  7. Marya
    Marya on March 25, 2019 at 4:01 am

    Hi. Thank you for your useful code. But I need code that when I click on another submenu, the previous submenu close and collect automatic and new sub menu that I click on it open. I’ll be glad to share and help me.
    Thanks a lot

    Reply
  8. Kelli
    Kelli on April 10, 2019 at 8:29 am

    This is AMAZING!!! I just used 5, 9 and 10!! Thank you it was a huge help!

    Reply
  9. Dan
    Dan on April 26, 2019 at 1:16 am

    Hey dude, I’m using the text before hamburger – how would i make this text a link?

    Reply
  10. Samar Jamil
    Samar Jamil on May 21, 2019 at 2:35 pm

    Hey Fabio! You are Awesome but one thing i want from you is “how style single post page like you are having on your site”Please make a Tutorial on this topic as well as soon as Possible.
    Thanks…

    Reply
    • Fabio Sarcona
      Fabio Sarcona on June 11, 2019 at 6:15 pm

      Thank you Samar!

      I’m sure we’ll get there as soon as we can 🙂

      Reply
  11. Stefan
    Stefan on June 5, 2019 at 8:11 pm

    Hi Fabio,

    on my search for help I found your article. On number 6 Mobile menu you have lines between the topics/titles. Only there. How did you achieve that?

    Thanks for your help
    Stefan

    Reply
    • Fabio Sarcona
      Fabio Sarcona on June 11, 2019 at 6:19 pm

      Hi Stefan!
      the separation line is added by default. What you see is a screenshot of the Divi mobile menu, we have not added any customization.

      Reply
  12. Foster Coburn
    Foster Coburn on June 7, 2019 at 6:03 pm

    I implemented #9 to make mobile logo aligned left and to hide background of the “select page”. After doing this, the hamburger has disappeared. I’ve tried adding various CSS to color the hamburger and make it appear, but no luck. What am I missing? The site in question is https://blessingsinthemirror.com

    Reply
  13. Tess
    Tess on June 11, 2019 at 12:20 am

    Thank you so much!!! I had been searching high and low for the hack to fix the mobile menu when using a centered logo. Yours was the only one I could find and it works perfectly. Others tell you how to change or remove the “Select Page” text but not remove the grey box.

    Love it!

    Reply
    • Fabio Sarcona
      Fabio Sarcona on June 11, 2019 at 6:31 pm

      Thanks to you for your kind feedback 🙂
      If you want to remove the grey box, you can simply set up a transparent background. Now I remember the CSS selector of the box, but if you share the link of your site, I send you the code to add to delete the grey box.

      Reply
  14. Haroon Ahmad
    Haroon Ahmad on June 21, 2019 at 6:46 am

    Only one word for these Menu’s

    Awesome! Awesome! Awesome! Awesome! Awesome! Awesome! Awesome!
    Love it! Please keep it up
    Thanks soooooo much 🙂

    Reply
  15. Darwin Spradlin
    Darwin Spradlin on June 30, 2019 at 5:44 pm

    I add the code from 2. Making the mobile menu sticky and then add 7. Fullwidth style + Collapsing Nested Menu Items

    the sticky mobile menu loses background ground color and is totally transparent, any thoughts?

    Reply
  16. John Fridinger
    John Fridinger on July 1, 2019 at 6:57 am

    Thank you for ll of this, very much…

    On your last helpful snippet, to change the “Select a page” text, is there a way that that text, which I’ve changed to say “MENU >”, could be made live, so as to drop the mobil menu down by clicking on it, in the same way that clicking on the hamburger icon does…?

    Reply
  18. Rebecca
    Rebecca on July 3, 2019 at 7:24 pm

    great snippets! How would i change the code so that the desktop view has the menu/header full width inline and the mobile menu and logo is centered? Basically the opposite of what you did for #9

    Reply
  19. David
    David on July 26, 2019 at 4:51 am

    I’ve tried several of your codes in my Divi site and no changes. Are they still active with the latest updates? Code in General – Custom CSS

    Reply
  20. davide
    davide on August 1, 2019 at 4:18 pm

    Ciao Fabio grazie di queste dritte. Utilizzando però il css 5 o 6 con il 7, la scritta menù sovrasta le righe del menù “hamburger”.
    Si può fare qualcosa?

    Reply
  21. Ken
    Ken on August 15, 2019 at 11:57 am

    Hi, thank you so much for your tips and especially the #7.
    It really helped me to make a better mobile menu without spending to much time with code.

    For those who want only the nested sub-menu, i had to do a little CSS cleanup cause there was a some unused/usless code so i juste put it there.

    @media screen and (max-width: 980px) {
    /*change burger menu when mobile menu open*/
    .mobile_nav.opened .mobile_menu_bar::before {
    content: ‘\4d’; }
    /*nested subemnu*/
    #main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
    position: relative; }
    /*style toogle div */
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.03);
    z-index: 1;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    top: 6px;
    right: 10px;
    cursor: pointer;
    text-align: center; }
    /*arrow up*/
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
    font-family: “ETmodules” !important;
    line-height: 36px;
    font-size: 24px;
    content: ‘\33’; }
    /*hide subemenu when not toggle*/
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
    display: none !important;
    padding-left: 0; }
    /*change arrow to down when toogle*/
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
    content: ‘\32’; }
    /*display submenu when toggle*/
    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
    display: block !important; }
    /*Remove shitty gray bg*/
    #main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    font-weight: inherit; }
    /*if current page, link get bolder*/
    #main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
    font-weight: bolder; }
    }

    Reply
  22. William Wenzel
    William Wenzel on August 22, 2019 at 10:22 pm

    Hi Fabio, I cannot stress enough how much I love the accordion-style mobile menu option you have here, and can’t understand why Divi doesn’t include that. So grateful!

    Reply
  23. Casey Teeters
    Casey Teeters on August 28, 2019 at 8:24 am

    I have a question regarding #7. In the javascript you call setup_collapsible_submenus() after both $(document).ready(function()) and $(window).load(function()). Why? Wouldn’t just one of those be enough?

    Reply
  24. Jim
    Jim on September 3, 2019 at 4:54 pm

    Hi Fabio,

    Thanks for these very useful snippets.

    I’m using the sticky mobile menu but also modified to shrink a bit when scrolling.

    Just trying to get it to change colour on scroll also ( like the desktop version – See here: intechtools.com/home/ )

    Any pointers on accomplishing a colour transition?

    Cheers ?

    Reply
  25. Marie Tabler
    Marie Tabler on September 19, 2019 at 8:00 am

    These are amazing! I used 4 of them and they are lovely! Thank you!

    Reply
  26. chris
    chris on September 20, 2019 at 11:48 am

    Fabio…you are the man!! Thanks!

    Reply
  27. Jasper
    Jasper on October 24, 2019 at 11:04 pm

    Hello Fabio,

    First of all, thanks a lot for sharing!! It is very helpfull.

    Do you maybe know how to make a menu appear when you scroll up?
    Only for mobile, not for desktop.

    Thank you!

    Reply
  29. Allgaeu Hoch 5
    Allgaeu Hoch 5 on November 28, 2019 at 11:27 pm

    AWESOME AWESOME AWESOME!!!! VERY VERY GOOD ARTICLE! It answered all questions i had and even gave me additional inputs that i had not thought of before… If you apply some (or more) styles from this article, your Divi-Menu will get so much better. Thanks for that!

    Reply
  31. Nick Healy
    Nick Healy on December 2, 2019 at 8:44 pm

    nevermind, i think i got it

    Reply
  32. farhad darabi
    farhad darabi on December 17, 2019 at 2:14 pm

    a great post thanks…but if may be so bold to ask you to advise what i’m doing wrong. I tried the collapsable code snippet and nothing happens? disabled other css and still no change?

    Reply
  33. asad ghazavi
    asad ghazavi on January 13, 2020 at 8:46 pm

    Hi, your post was really useful, you were the only site that had this post
    thanks

    Reply
  34. Carlos Magallon
    Carlos Magallon on January 15, 2020 at 9:14 pm

    Thank You! Divi don’t have this feature available, you code was useful!

    /* Active menu Divi phone */
    @media screen and (max-width: 980px) {
    .mobile_nav ul#mobile_menu .current_page_item > a {
    color: #3faadf;
    }
    }

    Reply
  35. Jay
    Jay on January 21, 2020 at 9:53 pm

    Thanks Fabio! Turning the hamburger in to an X worked perfectly and is much appreciated! I am still trying to figure out how to get the background image in the dropdown menu however. I’ve input your code with my image url in to the custom css field under theme options but it doesn’t seem to be having any effect on my page. Can you help me out?

    Reply
  36. Tim Cleary
    Tim Cleary on February 22, 2020 at 8:54 pm

    Hey Fabio, Great help. Something strange is going on. The code works fine for the main menu. But when I try to add a full-width menu via the menu module, the code fails to work i.e. the menu does not collapse. Any insights as what could be the issue? And how to fix it?

    Reply
  37. Niels Lambregts
    Niels Lambregts on March 5, 2020 at 1:36 pm

    Hi Fabio,

    Thank you so much for these wonderfull code snippets! Do they only work for the default header in divi with the class name #main-header?

    I created a custom header in the divi builder, so my header is not the #main-header. Do you know how I can still apply one your css snippets?

    Thanks in advance for considering my question.

    Reply
  38. bodrelollo
    bodrelollo on March 16, 2020 at 3:48 pm

    Hello Fabio. Finally…exactly what ? had been looking for the past two weeks :)) Thank you for all this.

    I’m particularly interested in point 7, as I need our mobile menu to have parent items both clickable and expansible.

    What is not clear to me is whether I should follow this tutorial https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder before pasting the two codes you provide.

    Anyway, I’ve tried both ways (with and without Divi’s suggestions) and it’s not working. The hyperlinked parent items don’t send to their pages and the third level is not showing. Please see it here https://irpimedia.irpi.eu/

    Perhaps you could help? We are going online in just a few days with our newly founded online newspaper.

    A million thanks,
    Lorenzo

    Reply
    • Augusto
      Augusto on August 18, 2020 at 7:13 pm

      Hi Bodrelollo!

      Did you find out how to make the main menu clickeable as well?

      Cheers!

      Reply
    • Philipp
      Philipp on February 2, 2021 at 2:13 pm

      Hello we also tried both and it does not work in the newest DIVI.

      Did you find a solution?

      Reply
  39. Taylor
    Taylor on March 28, 2020 at 7:44 am

    Hey Fabio,

    I used number 7 and it worked perfectly, with one exception. On mobile, when I scroll down the page, the menu turns transparent leaving just the logo and hamburger menu. How would I resolve this issue? Many thanks!

    Reply
  40. Ana Ayon
    Ana Ayon on April 2, 2020 at 8:27 pm

    This was super useful, I used the 7. Fullwidth style + Collapsing Nested Menu Items and edited a couple of things to match my site and it worked like a charm. Thank you!

    Reply
  41. Vanessa
    Vanessa on April 15, 2020 at 2:10 am

    Hi Fabio!

    Thanks so much for this! I just made a beautiful mobile menu using the background image css you shared above. Any chance that you have a code on how to do this for desktop? I’d really like my desktop menu to match the mobile one 🙂

    Thanks so much!

    Vanessa

    Reply
  42. Andi
    Andi on May 2, 2020 at 8:46 am

    Thanks a lot! 🙂

    Reply
  43. Urmila
    Urmila on May 16, 2020 at 8:54 am

    Very useful stuff to me, thanks a lot for my customers’s mennu!

    Reply
  44. bazzhood
    bazzhood on May 17, 2020 at 9:24 am

    This is a great post. I like this post. Many many thanks for this post. Really this post is so helpful. Thanks for sharing quality content.

    Reply
  45. Mike Cowburn
    Mike Cowburn on July 10, 2020 at 10:21 am

    Many thanks for the kind tips – helped me out with a client site enormously 🙂

    Reply
  46. Bryan
    Bryan on August 5, 2020 at 12:06 am

    I love your stuff and have been using for a few years. How can the code above be used for the Menu Module in the Theme Builder?

    Reply
  47. Kathrin
    Kathrin on October 27, 2020 at 4:35 pm

    Great, thank you for the codes!

    Reply
  48. Gabriele
    Gabriele on November 10, 2020 at 11:36 am

    Hey Fabio, thanks for this amazing contents.

    I got a problem. It seems like all the snippets are working on my website but not fully.
    I’m not obtaining the results i can see here.

    Colours change, some widths as well but the menu is not full width on mobile and it is still showing up like it is by default, so like a little drop down menu on the side ( showing half of it and don’t know why! )

    Thanks in advance for helping me out with this problem.

    Have a great day,

    Gabriele

    Reply
  50. Ricardo
    Ricardo on December 27, 2020 at 10:13 pm

    thank you. the mobile collpase menu in mobile in Divi 4 worked.
    Just a little problem… the arrow pointing down when the menu is closed is ok, but when we open the menu the arrow pointing up (to close the menu) appears together with the open arrow. Both apear in top of it´s other at the same time, looking like a cross.
    So , when we open the menu the arrow pointing down should disapear…
    can you help me?

    Reply
    • Leo1212
      Leo1212 on March 20, 2021 at 3:47 am

      Same problem here. You can see the error in the console:

      Uncaught TypeError: Cannot read property ‘slice’ of undefined
      at HTMLDivElement. (custom.unified.js?ver=4.9.2:47)
      at HTMLDivElement.dispatch (jquery.min.js?ver=3.5.1:2)
      at HTMLDivElement.v.handle (jquery.min.js?ver=3.5.1:2)

      Reply
    • Dario
      Dario on June 24, 2021 at 11:26 am

      I have the same problem. Would be nice to have a fix for this :-).
      When the menu is toggled both arrows are displayed. the problem is that

      is loaded twice but I don’t know how to fix it

      Reply
  51. Arthur
    Arthur on January 7, 2021 at 11:14 am

    Hi,

    I have a global header, which is actually big on mobile. I can make it smaller but then the mobile menu isn’t been shown entirely.
    Do you have any suggestions how I can make my global header with divi smaller without changing my mobile menu?

    Reply
  52. Brian
    Brian on January 13, 2021 at 10:22 pm

    Hi, great post! Super helpful. Any suggestion on how to include the main logo when using #7 (while keeping it a link to the home page)?

    Reply
  53. Amanda
    Amanda on January 21, 2021 at 8:21 pm

    I’m having trouble with my mobile menu nesting when it shouldn’t. Their are three menu items nesting under the home page and I cannot figure out why. Thanks so much!

    Reply
  54. Tracy
    Tracy on March 18, 2021 at 5:40 pm

    This is great! Thanks so much for sharing.

    I have a question please – is it possible to have a different menu in use for mobiles? The current menu on a site I have in development uses icons and text, but I don’t want these to show on mobile as it’s too bulky. I can’t see there are any options to select a different menu for mobiles only though. Is it possible?

    Reply
  55. youri
    youri on April 25, 2021 at 7:19 pm

    Hi, Great codes! Really helpfull.
    I was wondering if you have a script for option 7 where the logo stays visible in the mobile menu?
    hope 2 hear from you

    Reply
  56. Jesper
    Jesper on July 31, 2021 at 11:36 pm

    Super great article, with some usefull snippets!

    Reply
  57. Lex
    Lex on September 19, 2021 at 9:01 am

    Hi, great stuff, really. I just found out that the menu shadow (for header) isn’t applied for the sticky menu.

    Reply
  58. Rob Holmes
    Rob Holmes on January 10, 2022 at 7:03 pm

    Hello, Thanks for the great content! I am curious if there is a way to have the mobile menu to have from left to right; Hamburger- Logo- Text (and have the text hyperlinked).

    Please let me know.

    Thank you

    Rob

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *