10 Useful Code Snippets for your Divi Menu Mobile

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!

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;
}

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;
}

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);
}
}

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);
}
}

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;
}

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

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

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

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>

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

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;
    }
}

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>

Follow Me