Most Divi designers will tell you the one thing that usually gives away a Divi site is the menu. Most people don’t change the standard Divi mobile menu and it’s a real give-away.

I recently showed a website I designed that had a full-screen menu that slides in smoothly from the right, instead of the default Divi ‘dropdown’ mobile menu.

It’s very simple to do with a small amount of CSS, so thought I’d share it. You should add the CSS below to the style.css file if you’re using a Divi Child theme. If you’re not using a child theme, I’ve included instructions at the bottom how to add it using the standard Divi Theme options as well.

1. Fix the mobile header

The slide-in menu style works best with a fixed mobile header. If you don’t fix the mobile header it behaves a bit weirdly if you have a long menu that you need to scroll down. So let’s start off by fixing the header. To do that, use the following CSS:

/* Fix the mobile header */
@media (max-width: 980px) {
.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
    position: fixed;
}
}

2. Add the menu style and animation

Next, you need to add the following CSS to set the menu to full height, set the scrolling capability and trigger the slide-in animation:

/* Set the mobile menu full height and move it down so it doesn't overlap the fixed header */
/* Adjust the 80px set in the height calc value to match the height of your mobile menu */
#mobile_menu {
    display: block !important;
    height: calc(100vh - 80px);
  right: 0;
    position: fixed;
  overflow: auto;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
    -overflow-scrolling:touch!important;
    -webkit-overflow-scrolling:touch!important;
}

/* Move the mobile menu fully off the screen when closed using translateX(100%) */
.mobile_nav.closed #mobile_menu {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}

/* Move the mobile menu back onto the screen when open using translateX(0%) */
.mobile_nav.opened #mobile_menu {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

Note that this calculates the height of the menu so it fills the screen by taking the total height of the screen and deducting the height of the mobile menu bar, which is 80px by default for Divi. You may need to adjust this calculation if your mobile menu has a different height.

3. The finishing touch

As a nice final touch, let’s change the menu icon to a cross when the menu is opened. This makes it clearer to users they need to click it again to close the menu.
Here’s the CSS:

/* Switch the menu icon to a CROSS when opened */
.mobile_nav.opened .mobile_menu_bar:before {
    content: "\4d";
}

All the code in one

Here’s the complete CSS to make it easier for you to copy and apply:

/* ************************************************* */
/* MOBILE MENU SLIDE IN EFFECT - FIXED MOBILE HEADER */
/* ************************************************* */

/* Fix the mobile header */
@media (max-width: 980px) {
.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
    position: fixed;
}
}

/* Set the mobile menu full height and move it down so it doesn't overlap the fixed header */
/* Adjust the 80px set in the height calc value to match the height of your mobile menu */
#mobile_menu {
    display: block !important;
    height: calc(100vh - 80px);
  right: 0;
    position: fixed;
  overflow: auto;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
    -overflow-scrolling:touch!important;
    -webkit-overflow-scrolling:touch!important;
}

/* Move the mobile menu fully off the screen when closed using translateX(100%) */
.mobile_nav.closed #mobile_menu {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}

/* Move the mobile menu back onto the screen when open using translateX(0%) */
.mobile_nav.opened #mobile_menu {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

/* Switch the menu icon to a CROSS when opened */
.mobile_nav.opened .mobile_menu_bar:before {
    content: "\4d";
}

…And If you’re not using a Child Theme

To help those not using a Divi Child theme, you can also apply this in the Divi options. Here’s how to do that:

1. 1. In the admin area go to Divi > Theme Options
   2. Select the Integrations tab
   3. Paste the code below into the box marked Add code to the < head > of your blog
   4. Save your changes

<style>
/* ************************************************* */
/* MOBILE MENU SLIDE IN EFFECT - FIXED MOBILE HEADER */
/* ************************************************* */

/* Fix the mobile header */
@media (max-width: 980px) {
.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
    position: fixed;
}
}

/* Set the mobile menu full height and move it down so it doesn't overlap the fixed header */
/* Adjust the 80px set in the height calc value to match the height of your mobile menu */
#mobile_menu {
    display: block !important;
    height: calc(100vh - 80px);
  right: 0;
    position: fixed;
  overflow: auto;
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
    -overflow-scrolling:touch!important;
    -webkit-overflow-scrolling:touch!important;
}

/* Move the mobile menu fully off the screen when closed using translateX(100%) */
.mobile_nav.closed #mobile_menu {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}

/* Move the mobile menu back onto the screen when open using translateX(0%) */
.mobile_nav.opened #mobile_menu {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

/* Switch the menu icon to a CROSS when opened */
.mobile_nav.opened .mobile_menu_bar:before {
    content: "\4d";
}
</style>

Rounding up

Pretty easy right? There are loads of ways to customise the mobile menu appearance in Divi and I’ll post some more up soon.
If you found this tutorial useful, leave a comment!

About the Author

Ed Solman

Entrepreneur, Blogger and Website Developer/Designer. Passionate about helping people and businesses develop and grow. Daredevil sportsbike enthusiast.