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 ;)
This is terrific. Is there a way to adapt this to put the mobile primary menu below the first section, like a slider, and when scrolling down the page, have it stick to the top?
Hi Lance.
That’s certainly doable, sounds like a good idea for another tutorial :) Alternatively, you can create the header using the Menu Module and utilize the Sticky options to make the header sticky on scroll.
Hi looks great! Is there a small tweak that this will also work with the extra Builder menu?
Hi is there a small tweak for doing this with the extra Header as well?
If our menu items more than 70+ mousse scroll not working
above menu items not showing
That’s happening because the header is fixed. You need to set a
max-heightinvhunits for the dropdown menu so that the menu doesn’t expand outside of the viewport, and also make it scrollable to allow scrolling the long list of menu items.This looks great, a change on menu position is always welcome.