Make Divi Centered and Centered Inline Logo Header Bars Look Like The Default Header Bar On Mobile

by | Aug 31, 2017 | 10 comments

In this tutorial I am going to show you how to make Divi Centered and Centered Inline Logo header bars look like the Default header bar on mobile. Why would one need that? Well, I would highlight two main reasons why Divi users are not fond of these header formats on mobile:

First, some of them don’t like the huge “Select Page” bar under the logo and would like to get rid of it.

Second, these two header formats look nice both on desktop and mobile screens but the header bar takes up too much space on smaller mobile screens. This might not be a big issue if the mobile header is not “fixed”, but what if you would like to make it fixed (using custom CSS or a third party plugin) to let your site visitors to navigate through your site without having to scroll back to top of long mobile pages just to click on the next menu item? In this case the huge menu header bar of the fixed Centered and Centered Inline Logo headers would take up too much space on the smaller mobile device screens which would make viewing your site content not very convenient.

As a solution to these issues I decided to try to change the header bar layouts of these two header formats to look the same as the Default header bar which is much smaller and does not have the huge “Select Page” bar under the logo. So, we have this header bar:

… but we would like it to look like this:

To accomplish this task I have come up with the CSS snippet provided below with comments explaining what each part of it does. All you need to do is to copy and paste this CSS either into the Custom CSS field in Divi -> Theme Options or into the Additional CSS field in Divi -> Theme Customizer -> Additional CSS or add it to you child theme style.css file.

/* Make Divi Centered and Centered Inline Logo Header Bars Look Like The Default Header Bar On Mobile */
@media (max-width: 980px) {
/* align header container text to left */
    .et_header_style_centered #main-header .container,
    .et_header_style_split #main-header .container {
        text-align: left;
    }
/* set max width for logo container */
    .et_header_style_centered header#main-header .logo_container,
    .et_header_style_split header#main-header .logo_container {
        max-width: 50%;
    }
/* move split header logo to left */
    .et_header_style_split header#main-header .logo_container {
        float: left;
    }
/* prevent the split header logo from shrinking by increasing its max width */
    .et_header_style_split #logo {
        max-width: 100%;
    }
/* adjust top navigation alignment */
    .et_header_style_centered #main-header div#et-top-navigation,
    .et_header_style_split #main-header div#et-top-navigation {
        position: absolute;
    }
/* make "select page bg color transparent" */
    .et_header_style_centered #main-header .mobile_nav,
    .et_header_style_split #main-header .mobile_nav {
         background-color: rgba(0, 0, 0, 0); 
    }
/* remove mobile_nav left and right padding */
    .et_header_style_centered #main-header .mobile_nav,
    .et_header_style_split #main-header .mobile_nav {
         padding: 5px 0px;
    }
/* remove unnecessary top margin */
    .et_header_style_centered #et_mobile_nav_menu,
    .et_header_style_split #et_mobile_nav_menu {
        margin-top: 0px;
    }
/* hide "select page" container */
    .et_header_style_centered .mobile_nav .select_page,
    .et_header_style_split .mobile_nav .select_page {
        display: none;
    }
/* adjust vertical and right alignment of the mobile menu bar */
    .et_header_style_centered .mobile_menu_bar,
    .et_header_style_split .mobile_menu_bar {
        position: relative;
        right: 0px;
        text-align: right;
    }
/* adjust dropdown menu top offset */
    .et_header_style_centered .et_mobile_menu,
    .et_header_style_split .et_mobile_menu {
        top: 63px;
    }
}

 

After applying this CSS you will still have the normal Centered or Centered Inline Logo header bar on desktop screens but it will look like the Default header bar on tablet and phone screens (< 980px). This trick does not switch header formats but only re-styles the header bar.

Adjustments for the Mobile Menu Customizer plugin

If you are using the Mobile Menu Customizer plugin on your Divi site and would like to implement the CSS provided above then you will need to add the following CSS snippet too, it fixes the menu hamburger background color and minor alignment issues for v1.4 and higher.

/* Adjustments for the Mobile Menu Customizer plugin */
@media all and (max-width: 980px) {
    .chi_dmm_styles.et_header_style_centered #main-header .mobile_nav,
    .chi_dmm_styles.et_header_style_split #main-header .mobile_nav {
        display: inline-block;
        float: right;
        background-color: rgba(0, 0, 0, 0);
    }
    .chi_dmm_styles.et_header_style_centered #main-header .mobile_nav {
         padding: 10px 0px;
    }
    .chi_dmm_styles.et_header_style_centered .mobile_nav .mobile_menu_bar,
    .chi_dmm_styles.et_header_style_split .mobile_nav .mobile_menu_bar {
        top: 2px !important;
        -webkit-transform: initial !important; 
        -ms-transform: initial !important;
         transform: initial !important; 
    }
}

@media all and (max-width: 479px) {
    .chi_dmm_styles.et_header_style_centered .container.et_menu_container {
        position: relative !important;
    }
}

 

That’s all, hope you’ll find this snippet useful. Try it and share your experience and suggestions in the comments section below.

Feel free to share this tutorial with your friends and subscribe to stay updated 😉

Pin It on Pinterest

Shares
Share This