Turn Divi Default Header Into Centered Header On Mobile Screens

by | Jan 13, 2018 | 2 comments

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 😉

Pin It on Pinterest

Shares
Share This