Turn Divi Default Header Into Centered Header On Mobile Screens
This post is going to be an opposite to my other post where I am showing how to re-style the Divi Centered and Centered Inline Logo headers to look like the Default header on mobile screens.
The idea for this post came from a reader of my blog who wanted to have the Default header on desktop but re-style it so that it looked like the Centered header on mobile and this is what we are going to do now.
What we are going to achieve
The Default header looks like this on mobile screens:
We are going to re-style it and make it look like the Centered header on mobile screens:
Implementation
First we need to add top and bottom padding to the header bar (#main-header)
.et_header_style_left #main-header {
padding: 20px 0;
}Next we have to place the logo above the menu hamburger and center it.
.et_header_style_left header#main-header .logo_container,
.et_header_style_left .logo_container {
position: relative;
height: auto;
max-height: 100px;
padding: 0;
text-align: center;
}Then we remove the left and top padding form the top navigation container (#et-top-navigation) and make it fullwidth.
.et_header_style_left #main-header div#et-top-navigation {
padding-left: 0 !important;
padding-top: 0;
width: 100%;
}After that we need to align properly the mobile menu container (#et_mobile_nav_menu)
.et_header_style_left #et_mobile_nav_menu {
float: none;
position: relative;
margin-top: 20px;
}Now let’s style the “Select Page” background bar (which actually contains the “Select Page”, menu hamburger and the dropdown menu).
.et_header_style_left #main-header .mobile_nav {
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: rgba(0,0,0,.05);
text-align: left;
}Next we need to display the “Select Page” words.
.et_header_style_left .mobile_nav .select_page {
display: inline-block;
}And align properly the menu hamburger.
.et_header_style_left .mobile_menu_bar {
position: absolute;
top: 2px;
right: 5px;
}Finally, we need to add some top offset to dropdown menu to move it down right beneath the header bar.
.et_header_style_left .et_mobile_menu {
top: 53px;
}Bringing all of the CSS together
Now let’s bring all of the CSS snippets above together and wrap them in a media query with max-width of 980px so that this CSS takes effect on mobile screens only.
@media all and (max-width: 980px){
/* add padding to header bar */
.et_header_style_left #main-header {
padding: 20px 0;
}
/* change logo positioning and set its height */
.et_header_style_left header#main-header .logo_container,
.et_header_style_left .logo_container {
position: relative;
height: auto;
max-height: 100px;
padding: 0;
text-align: center;
}
/* set width and remove top and left padding of #et-top-navigation */
.et_header_style_left #main-header div#et-top-navigation {
padding-left: 0 !important;
padding-top: 0;
width: 100%;
}
/* apply necessary styles to mobile menu container */
.et_header_style_left #et_mobile_nav_menu {
float: none;
position: relative;
margin-top: 20px;
}
/* style the "Select Page" bar */
.et_header_style_left #main-header .mobile_nav {
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: rgba(0,0,0,.05);
text-align: left;
}
/* display the "Select Page" words */
.et_header_style_left .mobile_nav .select_page {
display: inline-block;
}
/* align the menu "hamburger" */
.et_header_style_left .mobile_menu_bar {
position: absolute;
top: 2px;
right: 5px;
}
/* add top offset to dropdown menu */
.et_header_style_left .et_mobile_menu {
top: 53px;
}
}Add this CSS either into the Custom CSS field on Divi -> Theme Options page or into the Divi -> Theme Customizer -> Additional CSS field or add it to you child theme style.css file. Save it and all done!
Hope you 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 ;)
On desktop I have the full screen menu. How can I have that on desktop but have the default menu on mobile?
Hi David.
Unfortunately, that’s not possible without custom coding or using a 3rd party plugin.
Can I have slide in menu on desktop and full width on mobile?
You can use the Slide-In header for that. It has a fixed width on all devices but you can set it’s width to 100% on mobile devices using some simple CSS.
Worked perfectly, thanks!!
this css works on all devices however, when my cell phone is in portrait mode, the logo does not show. Is there something I am missing?
This is great. How can I exclude the secondary menu from the dropdown?
Hi Jon,
try this CSS:
/* hide secondary menu items */
#mobile_menu > li:not([id]) {
display: none;
}
/* end hiding secondary menu items */
Also you can do that with the Mobile Menu Customizer plugin, it allows you to hide the secondary menu items(or move them above the primary menu items in dropdown menu) with a click.
Great tutorial with easy explanations! but what if you need to do the opposit? Change from centered to default header only on mobile
Hi sarah.
Thanks for your comment. There is a tutorial for that as well, check it out: Make Divi Centered and Centered Inline Logo Header Bars Look Like The Default Header Bar On Mobile