Move Divi Mobile Menu Bar to the Bottom of the Screen

by | May 10, 2019 | 1 comment

In this tutorial I show how to move the Divi mobile menu bar to the bottom of the screen using CSS only. The provided CSS snippets allow you to move the :

  • Primary menu bar
  • Secondary menu bar
  • Both menu bars with secondary bar placed ABOVE the primary 
  • Both menu bars with secondary bar placed BELOW the primary

Each of these snippets makes both menu bars fixed with primary menu bar shrinking on scroll. If you don’t want it to shrink then you can remove the corresponding part of the CSS snippet, it is commented accordingly.

The dropdown menu will be expanding upwards.

For these snippets to work properly make sure the Fixed Navigation Bar option is enabled in the Divi Theme Options.

(Also check out the 5 Simple CSS Snippets To Customize Divi Mobile Menu Bar tutorial for additional mobile menu bar customizations.)

1. Move Divi Mobile Menu Bar to the Bottom

This CSS snippet moves the primary mobile menu bar to the bottom of the screen leaving the secondary menu bar at the top (if you have enabled it).

Result

CSS

@media all and (max-width: 980px){
    
  /* MOVE MOBILE MENU BAR TO THE BOTTOM OF SCREEN */
  /* remove page container top padding */
  .et_header_style_left.et_transparent_nav #page-container, 
  .et_header_style_left.et_fixed_nav.et_show_nav #page-container {
    padding-top: 30px !important;
  }
  /* move main header to the bottom of the screen */
  .et_header_style_left #main-header,
  .et_header_style_left.et_fixed_nav #main-header {
    top: auto !important;
    bottom: 0;
    position: fixed;
    box-shadow: 0 -1px 0 rgba(0,0,0,.1);
  }
  /* set dropdown menu bottom offset */
  .et_header_style_left #main-header .et_mobile_menu {
    bottom: 80px;
  }
  /* make secondary nav bar fixed */
  .et_header_style_left  #top-header,
  body.admin-bar.et_header_style_left.et_fixed_nav #top-header {
    position: fixed;
  }
  
  /* shrink primary menu bar on scroll */
  /* decrease top navigation padding-top on scroll */
  .et_header_style_left .et-fixed-header #et-top-navigation {
    padding-top: 5px;
  }
  /* decrease menu hamburger padding-bottom on scroll */
  .et_header_style_left .et-fixed-header .mobile_menu_bar {
    padding-bottom: 5px;
  }
  /* decrease dropdown menu bottom offset on scroll */
  .et_header_style_left #main-header.et-fixed-header .et_mobile_menu {
    bottom: 42px;
  }
  /* END shrinking primary menu bar on scroll */
  
  /* END: MOVE MOBILE MENU BAR TO THE BOTTOM OF SCREEN */
    
}

2. Move Divi Mobile Secondary Menu Bar to the Bottom

This snippet moves only the secondary menu bar to the bottom of the screen.

Result

CSS

@media all and (max-width: 980px){
  
  /* MOVE MOBILE SECONDARY MENU BAR TO THE BOTTOM OF SCREEN */
  /* adjust page container top padding */
  .et_header_style_left.et_transparent_nav #page-container, 
  .et_header_style_left.et_fixed_nav.et_show_nav #page-container {
    padding-top: 80px !important;
  }
  /* remove main header top padding and make it fixed */
  .et_header_style_left #main-header, 
  .et_header_style_left.et_fixed_nav #main-header {
    position: fixed;
    top: 0 !important;
  }
  /* place the secondary nav bar at the bottom of the screen */
  .et_header_style_left  #top-header,
  body.admin-bar.et_header_style_left.et_fixed_nav #top-header {
    position: fixed;
    top: auto;
    bottom: 0;
  }
  
  /* shrink primary menu bar on scroll */
  /* decrease top navigation padding-top */
  .et_header_style_left .et-fixed-header #et-top-navigation {
    padding-top: 5px;
  }
  /* decrease menu hamburger padding-bottom */
  .et_header_style_left .et-fixed-header .mobile_menu_bar {
    padding-bottom: 5px;
  }
  /* END shrinking primary menu bar on scroll */
  
  /* END: MOVE MOBILE SECONDARY MENU BAR TO THE BOTTOM OF SCREEN */
    
}

3. Move Both Menu Bars to the Bottom with Secondary being ABOVE the Primary

There are two possible choices when moving both menu bars to the bottom: with secondary menu bar above or below the primary menu bar.

This snippet moves both menu bars to the bottom and places the secondary menu bar above the primary menu bar.

Result

CSS

@media all and (max-width: 980px){
    
  /**
   * MOVE MOBILE MENU BARS TO THE BOTTOM OF SCREEN 
   * with secondary bar ABOVE the primary menu bar
   */
  /* remove page container top padding */
  .et_header_style_left.et_transparent_nav #page-container, 
  .et_header_style_left.et_fixed_nav.et_show_nav #page-container {
    padding-top: 0 !important;
  }
  /* move main header to the bottom of the screen */
  .et_header_style_left #main-header,
  .et_header_style_left.et_fixed_nav #main-header {
    top: auto !important;
    bottom: 0;
    position: fixed;
    box-shadow: 0 -1px 0 rgba(0,0,0,.1);
  }
  /* place the secondary navigation bar ABOVE the main header bar */
  .et_header_style_left  #top-header,
  body.admin-bar.et_header_style_left.et_fixed_nav #top-header {
    position: fixed;
    top: auto;
    bottom: 80px;
  }
  /* set dropdown menu bottom offset */
  .et_header_style_left #main-header .et_mobile_menu {
    bottom: 112px;
  }
  
  /* shrink primary menu bar on scroll */
  /* decrease top navigation padding-top on scroll */
  .et_header_style_left .et-fixed-header #et-top-navigation {
    padding-top: 5px;
  }
  /* decrease menu hamburger padding-bottom on scroll */
  .et_header_style_left .et-fixed-header .mobile_menu_bar {
    padding-bottom: 5px;
  }
  /* decrease dropdown menu bottom offset on scroll */
  .et_header_style_left #main-header.et-fixed-header .et_mobile_menu {
    bottom: 74px;
  }
  /* decrease secondary menu bar bottom offset on scroll */
  .et_header_style_left #top-header.et-fixed-header, 
  body.admin-bar.et_fixed_nav #top-header.et-fixed-header {
    bottom: 42px;
  }
  /* END shrinking primary menu bar on scroll */
  
  /* END: MOVE MOBILE MENU BARS TO THE BOTTOM OF SCREEN */
    
}

4. Move Both Menu Bars to the Bottom with Secondary being BELOW the Primary

This snippet moves both menu bars to the bottom and places the secondary menu bar below the primary menu bar.

Result

CSS

@media all and (max-width: 980px){
    
  /**
   * MOVE MOBILE MENU BARS TO THE BOTTOM OF SCREEN 
   * with secondary bar BELOW the primary menu bar
   */
  /* remove page container top padding */
  .et_header_style_left.et_transparent_nav #page-container, 
  .et_header_style_left.et_fixed_nav.et_show_nav #page-container {
    padding-top: 0 !important;
  }
  /* move main header to the bottom of the screen */
  .et_header_style_left #main-header,
  .et_header_style_left.et_fixed_nav #main-header {
    top: auto !important;
    bottom: 30px;
    position: fixed;
    box-shadow: 0 -1px 0 rgba(0,0,0,.1);
  }
  /* place the secondary navigation bar BELOW the main header bar */
  .et_header_style_left  #top-header,
  body.admin-bar.et_header_style_left.et_fixed_nav #top-header {
    position: fixed;
    top: auto;
    bottom: 0;
  }
  /* set dropdown menu bottom offset */
  .et_header_style_left #main-header .et_mobile_menu {
    bottom: 80px;
  }
  
  /* shrink primary menu bar on scroll */
  /* decrease top navigation padding-top on scroll */
  .et_header_style_left .et-fixed-header #et-top-navigation {
    padding-top: 5px;
  }
  /* decrease menu hamburger padding-bottom on scroll */
  .et_header_style_left .et-fixed-header .mobile_menu_bar {
    padding-bottom: 5px;
  }
  /* decrease dropdown menu bottom offset on scroll */
  .et_header_style_left #main-header.et-fixed-header .et_mobile_menu {
    bottom: 42px;
  }
  /* END shrinking primary menu bar on scroll */
  
  /* END: MOVE MOBILE MENU BARS TO THE BOTTOM OF SCREEN */
    
}

Make Primary Menu Bar Shrink Smoothly

Use this snippet to make the primary menu bar height transition smoothly on scroll. Add it to any of the snippets above.

CSS

@media all and (max-width: 980px){
    
  /**
   * Transition header bar height
   */
  /* 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;
  }
  /* 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;
  }
  /* transition dropdown menu and secondary menu bar bottom offset */
  .et_header_style_left #main-header .et_mobile_menu,
    .et_header_style_left #top-header {
    -webkit-transition: bottom 0.4s ease;
    -o-transition: bottom 0.4s ease;
    transition: bottom 0.4s ease;
  }
    
}

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 😉

Pin It on Pinterest

Shares
Share This