In the pictures we use to illustrate the effect of the CSS on the Divi mobile menu, those blue vertical lines beneath the left border of the menu are nothing to worry about. As it happens, the example page has some highlighted text on it. Just like this the text below in fact…

We are going to use CSS to style the Divi mobile menu. We recommend using a child theme for this. There are many good articles on the internet about creating child themes. You can, instead, either use a CSS plugin or put your CSS into Divi->Theme Options->Custom CSS.

Heading Styles On Divi Mobile Menu

The first thing to talk about is that, depending on the chosen Heading Style (chosen in the Divi Customizer), you will be using a different mobile layout, with different components. Both the Centered and Centered Inline Logo Heading Style have a shaded background. The Default and Centered styles display the logo. The Default Heading Style adds a Search button. We will talk next about how to deal with these different layouts.

Heading Style

Centered Inline Logo

Removing Default Components

The mobile header will scroll by default. So, if it is instead ‘fixed’ in place, it might be appropriate to remove some components. It may be better to have a much simpler, less intrusive layout that does not obscure the page content as it scrolls. So, it makes sense then to think about what header elements could be removed. Because we are starting from three different layouts, we will aim for the simplest header possible and remove everything apart from the menu from. Of course, you may choose to do something different.

The mobile header is contained in an object called div.et_menu_container and here is the CSS to remove everything apart from the menu hamburger –

/* switch off the Search button on Default header */
div.et_menu_container span#et_search_icon {
    display:none;
}
/* make the enclosing container transparent on Centered and Centered Inline Logo headers */	
div.et_menu_container div.mobile_nav { 
    background-color:transparent !important;
}
/*  switch off the Select Page text on Centered and Centered Inline Logo headers */
div.et_menu_container span.select_page {
    display:none !important;
}
/*  switch off the mobile logo on Default and Centered headers */
div.et_menu_container div.logo_container {
    display:none;
}

Try this out now by adding this CSS to your child theme or to a CSS plugin or by adding it to your CSS into Divi->Theme Options->Custom CSS. If this works, the mobile header should contain only the menu hamburger. Like this –

The next thing we would like to deal with is the border beneath the mobile header. in fact, it is quite difficult to work out how this border has been made. It turns out that is is not actually a border at all, but a shadow. This shadow is present on both mobile and desktop. We think a shadow has been used to give a more three dimensional look to the header. In other words, to lift it off of the page and to better separate it from the page content when it scrolls.

/* this is used when viewport is at top of page */
#main-header {
    -webkit-box-shadow:none !important;	 
    -moz-box-shadow:none !important;	 
    box-shadow:none !important; 
}

/* this is used when we scroll and have a fixed header */
#main-header.et-fixed-header {
    -webkit-box-shadow:none !important;	 
    -moz-box-shadow:none !important;	 
    box-shadow:none !important; 
}

Fixing The Mobile Header in Place

Now that the header is as minimal and non-intrusive as possible, we are going to fix it in position, to pin it to the screen. After doing this, whenever you scroll, the header and menu hamburger will stay where they are. In CSS, you do this by setting the position of an object to be fixed. This means that it is stationary, relative to the viewport. The slightly complex thing about doing this for the mobile header is that, depending on the Heading Style used, you need to target slightly different objects. Here is the CSS code that is needed. This should fix the menu, regardless of Heading Style.

.et_non_fixed_nav ‪#‎main‬-header, .et_non_fixed_nav ‪#‎top‬-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
    position: fixed !important;
}

Styling The Hamburger Icon

Now we are going to style the hamburger itself. It turns out there are actually two objects that contain hamburger icons; one is used when the menu is displayed (open) and the other when it is closed. They are called div.mobile_nav.opened .mobile_menu_bar:before and div.mobile_nav.closed .mobile_menu_bar:before. It is useful that the hamburger is split like this because it allows us to use different icons depending on the state of the menu. We are going to display an ‘X’ when the menu is open and the default hamburger icon when closed. Clicking on the ‘X’ will close the menu. 

/* style the opened mobile menu hamburger (make it an 'X') */	
div.mobile_nav.opened .mobile_menu_bar:before {
    font-family: "ETmodules";
    content: "\4d"; 
}

By setting the content of div.mobile_nav.opened .mobile_menu_bar:before to “\4d”, we are changing the character used as the hambuger to an ‘X’. Take a look at the table in the ET website to confirm this.

/* color both the open and close hamburgers */
div.mobile_nav.opened .mobile_menu_bar:before, div.mobile_nav.closed .mobile_menu_bar:before {
    color: #e9b000; 
}

div.mobile_nav.opened .mobile_menu_bar:before {
    color: red; 
}
div.mobile_nav.closed .mobile_menu_bar:before {
    color:yellow; 
}

Lastly, we might want to make the hamburger a little bigger. It needs to stand out against whatever the background happens to be, when it is scrolled. We already know how to target the hamburger icon, and, because it is an icon font, we can change the size by simply adjusting its font-size. You might want to use a different value, depending on your design. Our code for styling the hamburgers should now look something like this –

/* color and size both the open and close hamburgers */
div.mobile_nav.opened .mobile_menu_bar:before, div.mobile_nav.closed .mobile_menu_bar:before {
    color: #e9b000; 
    font-size:60px !important;
}

If you have followed all of this so far, here is what you should have –

Open Menu

Styling The Menu Container

Next, the pop-up mobile menu itself is contained in an object called .et_mobile_menu and we will style this a little now. The first thing we want to do is to make the background semi-transparent. We do this because the menu can be anywhere when it is opened and we want the visitor to not lose track of thier position in the page.

/* style the container that the menu elements are housed in */
.et_mobile_menu {
    /* background is white by default */
    background-color:rgba(255,255,255,0.6) !important;
}

/* style the container that the menu elements are housed in */
.et_mobile_menu {
    /* background is white by default */
    background-color:rgba(255,255,255,0.6) !important;
    border: 1px solid #e9b000;
    border-radius: 10px;
}

If you want the menu container to appear in a slightly different position, you can add a setting for margin-top here as well. A positive value (in pixels) will move it down and a negative value will move it up.

If you have been following this so far, you should have something that looks like this. The menu is in a fixed position and does not move when scrolled, the background of the pop-up menu is semi-transparent and it has a round-cornered border.

There is another issue that we might consider doing something about though. The  ‘Services’ menu item, has a shaded background. This is because it is the parent of a submenu and the background shading is intended to make it stand out. We will remove this background and rely on the indenting to identify submenus.

We can remove the shading on the submenu root item by targeting .et_mobile_menu .menu-item-has-children a. As it happens, the root menu item of submenus has the .menu-item-has-children class attached to it, so it is quite easy to target. Now, for the background colour, we could use the same colour here as on the container itself, we could duplicate the settings. But that would mean that if we decided to change the pop-up menu background colour, we would need to change it in two places. Setting this to transparent here instead allows the menu container background color to show through. With this setting, if we need to change the background colour, we only need to change it in the menu container. Of course, if we actually do want to use a different colour for the submenu root item, we would have to make that change here. This is the CSS code we need –

.et_mobile_menu .menu-item-has-children a {
    background-color:transparent !important;
}

Though it isn’t obvious from the above, one other thing to worry about is that this CSS targets ALL of the HTML anchor elements (the ‘a’ elements) contained within .menu-item-has-children including ALL descendents. These HTML anchor elements are used for every menu item so if you have a lot of submenus, they will all be targetted by this CSS. Take a look at the structure of your menu and submenu using Google Chrome Inspect. Here is what our simple menu looked like –

The menus are unordered lists (ul’s) of list items (li’s). The submenu root is a list item that has the class .menu-item-has-children attached to it. The submenu list item contains a link (the root or parent item) and an unordered list of list items (the submenu). The CSS we suggested above does not simply target the link at the root of the submenu but ALL the links within the submenu (and its submenus if present). In most circumstances, this is not an issue. But, depending on what styling we actually apply, if we do not notice that all submenu items are targeted, this might have an unexpected effect. To make this clearer, try instead something like –

Styling The Menu Items

We’ve done all the tricky bits now. This is the easy bit. In fact, we already changed the colour of the submenu items when we were testing the behaviour of the CSS a moment ago. Remembering that a menu is a nested list of unordered list items and that it is the anchor links (the ‘a’ elements) that display the text, so we can target all menu items and change their colour simply with –

We could also change the font-size and font-weight of the text in the menu items here if we wanted to.

The other thing we might consider doing is to set the weight of all menu items to be a little less heavy. We need to do this to both the menu items and the root of the submenus. This CSS to deal with this is –

.et_mobile_menu li a, .et_mobile_menu .menu-item-has-children>a {
    font-weight:400;
}

Some Other Things To Try

Though we haven’t used them here, these might be useful in some circumstances.

Remove the Horizontal Top Border Stripe

Divi puts a horizontal stripe at the top of drop down menus. It does this by using the border-top of the drop down menu container. Our styling herre effectively switched that off when we styled the whole border of the menu container. So don’t do this if you have applied the styling above. But, if you wanted to switch off the horizontal stripe at the top of the drop down menu, something like this would work –

.et_mobile_menu {
    border-top: none;
}

Disable All Submenu Items

The Divi mobile menu aggregates all menu items into a single menu, indented to provide some visual structure for submenus. If you have a lot of menu items, the menu might be longer than the device it is displayed on, forcing the user to scroll to see the menu. If you have a lot of submenu items, you might decide not to display them. You can do that with this code –

.menu-item ul.sub-menu li.menu-item {
    display:none;
}

Replace Mouse Hover Effect

Though you don’t notice this on mobile, on desktop, Divi uses a mouse hover effect on each menu item. Using Google Chrome Inspect we can see that it sets the background colour on mouse hover to rgba(0, 0, 0, 0.03). The above code actually disables the mouse hover effect on the submenu root menu item. If we really wanted to be fussy, we could put back the Divi default hover behaviour with this CSS. Remember though, we will only notice this issue if our website uses the mobile menu on the desktop. Also, if Divi ever change the default hover effect on mobile menu…. this will have to change as well.

/* maintain Divi mouse hover behaviour */
.et_mobile_menu .menu-item-has-children>a:hover  {
    background-color:rgba(0, 0, 0, 0.03) !important;
}

Styling or Replacing The Select File Text

If you want to leave the Select File text visible, you can style it to fit with the menu styling above. it might also be an idea to make it a little bigger and to move it down a little to line up better with the positioning of the hamburger icon we have used –

/* Style the 'Select File' text that */
/* normally appears in the mobile menu bar..... */
div.et_menu_container span.select_page {
    font-size:32px !important;
    padding:10px 10px !important;
    color: #e9b000 !important; 
}

This will not work unless you disable the CSS code that switches off the display of the Select File text –

/*  switch off the Select Page text on Centered and Centered Inline Logo headers */
div.et_menu_container span.select_page {
    /* display:none !important; */
}

If you do not like the Select File text and want to replace it with other text there is a fantastic trick for doing this. Simply put this code in your functions.php child theme file. The code here uses ‘Menu’ as the replacement text.

/* change the text used by WP for the 'Menu' in the mobile menubar */
add_filter('gettext', 'change_select_page_text', 20, 3);
function change_select_page_text($text, $orig, $domain ) {
	if ($domain == 'Divi' and $orig == 'Select Page') { return 'Menu'; }
	return $text;
}

Styling The Header

If you have made the Select Page (or other) text visible, it might be nice to give the menu header the same styling as the pop-up menu. The menu header is contained in an object called div#et_mobile_nav_menu. So, the cunning way to do this is to modify the existing code so apply the same styling to the header as has been applied to the pop-up menu container. The way to do this is simply to modify the existing code to be –

/* style the pop-up menu and header */
.et_mobile_menu, div#et_mobile_nav_menu {
    /* background is white by default */
    background-color:rgba(255,255,255,0.6) !important;
    border: 1px solid #e9b000;
    border-radius: 10px;
}

If you do this, it is very likely that the pop-up menu will overlap the header. One way to fix this is to use the suggestion made earlier to reposition the pop-up menu container by changing the value of margin-top, by pushing it down a little. Just add something like this where we have used 40px as the distance to be moved –

/* move the pop-up menu down a little to avoid overlapping the header */
.et_mobile_menu {
    margin-top:40px; 
}

All The CSS Code

For the sake of simplicity, here is all of the code from above, in one place, and wrapped in a media query to make sure irt only effects mobile devices. We have not included any of the code from the section Some Other Things To try.

@media (max-width: 980px){
    /* this will fix the menu regardless of the header format */
    .et_non_fixed_nav ‪#main‬-header, .et_non_fixed_nav ‪#top‬-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
        position: fixed !important;
        background-color:transparent !important;
    }
    /*****************************************************************
    Style the Mobile Menu Header
    Used if we have a Heading Style of Centered or Centered Inline Logo
    *****************************************************************/
    /* switch off the Search button on Default header */
    div.et_menu_container span#et_search_icon {
        display:none;
    }
    /* make the enclosing container transparent on Centered and Centered Inline Logo headers */	
    div.et_menu_container div.mobile_nav { 
        background-color:transparent !important;
    }
    /*  switch off the Select Page text on Centered and Centered Inline Logo headers */
    div.et_menu_container span.select_page {
        display:none !important;
    }
    /*  switch off the mobile logo on Default and Centered headers */
    div.et_menu_container div.logo_container {
        display:none;
    }
    /*****************************************************************
    Remove the shadow beneath the header
    *****************************************************************/
    /* this is used when viewport is at top of page */
    #main-header {
        -webkit-box-shadow:none !important;
        -moz-box-shadow:none !important;
        box-shadow:none !important;
    }
    /* this is used when we scroll and have a fixed header */
    #main-header.et-fixed-header {
        -webkit-box-shadow:none !important;
        -moz-box-shadow:none !important;
        box-shadow:none !important;
    }
    /*****************************************************************
    Style the Hamburger
    *****************************************************************/
    /* style the opened mobile menu hamburger (make it an 'X') */
    div.mobile_nav.opened .mobile_menu_bar:before {
        font-family: "ETmodules";
        content: "\4d";
    }
    /* color and size both the open and close hamburgers */
    div.mobile_nav.opened .mobile_menu_bar:before, div.mobile_nav.closed .mobile_menu_bar:before {
        color: #e9b000;
        font-size:60px !important;
    }
    /*****************************************************************
    Style the Menu Container
    *****************************************************************/
    /* style the container that the menu elements are housed in */
    .et_mobile_menu {
        /* background is white by default */
        background-color:rgba(255,255,255,0.6) !important;
        border: 1px solid #e9b000;
        border-radius: 10px;
    }
    /*****************************************************************
    Style the submenu root (parent)
    *****************************************************************/
    /* the root (parent) menu item of submenus gets treated a little different */
    /* and needs this to deal with the background */
    .et_mobile_menu .menu-item-has-children>a {
        background-color:transparent !important;
    }
    .et_mobile_menu .menu-item-has-children>a:hover {
        background-color:rgba(0, 0, 0, 0.03) !important;
    }
    /*****************************************************************
    Style the menu items
    *****************************************************************/
    .et_mobile_menu li a {
        color:#e9b000 !important;
    }
    /*****************************************************************
    Set all items to the same font weight
    *****************************************************************/
    .et_mobile_menu li a, .et_mobile_menu .menu-item-has-children>a {
        font-weight:400;
    }
}