I am constantly being asked about how to customize Divi mobile menu and in this post I’ve provided answers to some of the most frequently asked questions that I am currently receiving from the users of Divi theme.

The CSS snippets provided in this post apply to Divi Default header format on mobile devices (< 980px width screens). Enjoy!

(If you need to move the mobile menu bar to the bottom of the screen then check out the Move Divi Mobile Menu Bar to the Bottom of the Screen tutorial.)

1. Move logo to right and menu to left

This CSS snippet moves the logo to right and the menu, cart and search icons to the left side of the menu bar.

CSS

@media all and (max-width: 980px){
    
  /* MENU LEFT - LOGO RIGHT */
  /* move logo to right */
  .et_header_style_left .logo_container {
    text-align: right;
  } 
  /* move top navigation to left */
  .et_header_style_left #et-top-navigation {
    padding-left: 0 !important;
    padding-right: 120px;
    float: left;
  } 
  /* adjust the cart, search and menu hamburger icons alignment */
  .et_header_style_left #et-top-navigation .et-cart-info {
    float: right;
    margin: 5px 0 0 0;
  }
  .et_header_style_left #et_top_search {
    float: right;
    margin: 0 25px 0;
  }
  .et_header_style_left #et_mobile_nav_menu {
    float: left;
  } 
  /* move search input field and 'X' icon to left */
  .et_header_style_left .et-search-form {
    left: 0;
    right: 50%;
  }
  .et_header_style_left span.et_close_search_field {
    left: 50%;
    right: auto;
  } 
  /* END: MENU LEFT - LOGO RIGHT */
    
}

2. Left Cart & Search – Centered Logo – Right Menu

This snippet centers the logo and moves the cart and search icons to the left hand side.

The search input field width is set to 100% (it is 50% by default) and the logo is set to show/hide when the search is opened and closed, just like the rest of the header elements.

CSS

@media all and (max-width: 980px){   
  
  /* CART&SEARCH LEFT - LOGO CENTER - MENU RIGHT */
  /* center the logo */
  .et_header_style_left .logo_container {
    text-align: center;
  }
  /* hide logo when search opens */
  .et_header_style_left .et_pb_menu_hidden .logo_container {
    opacity: 0;
    -webkit-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
    animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
  }
  /* show logo when search is closed */
  .et_header_style_left .et_pb_menu_visible .logo_container {
    opacity: 1;
    -webkit-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
    animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
  }
  /* remove the top navigation left padding and adjust its width */
  .et_header_style_left #et-top-navigation {
    padding-left: 0 !important;
    width: 100%;
  }
  /* adjust the search input field width */
  .et_header_style_left .et-search-form {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* adjust cart icon margin */
  .et_header_style_left #et-top-navigation .et-cart-info {
    margin: 5px 0 0 0;
  } 
  /* END: CART&SEARCH LEFT - LOGO CENTER - MENU RIGHT */

}

3. Left Menu – Centered Logo – Right Cart & Search

If you need the logo to be centered but the hamburger menu on the left and the cart and search icons on the right (the opposite of the result above) then simply add these lines of CSS to the CSS from the snippet 2.

CSS

@media all and (max-width: 980px){
    
  /* MENU LEFT - LOGO CENTER - CART&SEARCH RIGHT */
  /* move menu hamburger to left, and search and cart icons to right */
  .et_header_style_left #et_mobile_nav_menu {
    float: left;
  }
  .et_header_style_left #et-top-navigation .et-cart-info {
    float: right;
  }
  .et_header_style_left #et_top_search {
    float: right;
    margin: 0px 20px 0 0;
  } 
  /* END: MENU LEFT - LOGO CENTER - CART&SEARCH RIGHT */
  
}

4. Decrease mobile menu bar height

This is the simplest one, all you need to do is to decrease the top padding of the top navigation and bottom padding of the hamburger menu icon.

CSS

@media all and (max-width: 980px){
  
  /* DECREASE MOBILE HEADER BAR HEIGHT */
  /* decrease top naviagtion padding-top */
  .et_header_style_left #et-top-navigation {
    padding-top: 5px;
  }
  /* decrease menu hamburger padding-bottom */
  .et_header_style_left .mobile_menu_bar {
    padding-bottom: 5px;
  } 
  /* END: DECREASE MOBILE HEADER BAR HEIGHT */

}

5. Fixed mobile header with decreasing height on scroll

This snippet will make the mobile header fixed and transition its height smoothly when the page is scrolled down, just like the fixed header on desktop with different heights applied to Primary menu and the Fixed header. 

The Fixed Navigation Bar option must be enabled in Divi Theme Options.

CSS

@media all and (max-width: 980px){
    
  /* FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */
  /* make header fixed */
  .et_header_style_left.et_fixed_nav #main-header {
    position: fixed;
  }
  /* decrease top navigation padding-top */
  .et_header_style_left .et-fixed-header #et-top-navigation {
    padding-top: 5px;
  }
  /* transition top navigation padding-top */
  .et_header_style_left #et-top-navigation {
        -webkit-transition: padding-top 0.4s ease;
        -o-transition: padding-top 0.4s ease;
        transition: padding-top 0.4s ease;
  }
  /* decrease menu hamburger padding-bottom */
  .et_header_style_left .et-fixed-header .mobile_menu_bar {
    padding-bottom: 5px;
  }
  /* transition menu hamburger padding-bottom */
  .et_header_style_left .mobile_menu_bar {
        -webkit-transition: padding-bottom 0.4s ease;
        -o-transition: padding-bottom 0.4s ease;
        transition: padding-bottom 0.4s ease;
  }
  /* END: FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */
    
}

That’s all, hope you’ll find this tutorial useful. Share it with your friends and feel free to leave your thoughts and suggestions in the comments section below and subscribe to stay updated ;)