Create Better Divi Headers

Move Divi Mobile Menu Bar to the Bottom of the Screen

by | May 10, 2019 | 7 comments

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

Subscribe To Our Newsletter

Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

You have Successfully Subscribed! Please confirm your email address.

Get FREE Divi Layouts

Download 20+ Divi templates for FREE!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Cyber Monday Is Coming!

Subscribe to get notified when the SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!