Use an "App-Style" Header Layout for Divi on Mobiles

This post may contain referral links which may earn a commission for this site

The Divi Theme's header dynamically modifies itself to look good on small devices, such as smart phones. Here's how to make it look a little bit better.

If you leave (or set) the Divi header as the "Default" header style, it will look like this:

divi theme mobile header

Depending on the size of the mobile device's screen, the logo and menu box will vary in distance from the edge of the screen. If you'd like a more consistent appearance across devices, we can set the components to appear at a fixed distance from the edges, using the following CSS:

@media only screen and ( max-width: 980px ) {
    #main-header .container { 
        width:100%;
        box-sizing:border-box;
        padding-right:30px;
        padding-left:30px;
    }
    #main-header .logo_container {
        width: auto;
    }
    #main-header #logo {
        max-width: 100%;
    }
}

Note that this will only work for the "Default" header style, not others such as the "Centered" style.

Here's how it looks with the fix applied.

divi theme mobile header-adjusted

Note that the distance of the logo and menu bar will be the same in all devices, rather than changing as it does in the default configuration.

Hundreds of new features for Divi
in one easy-to-use plugin

3 Comments

  1. Hello,

    When I enable this option it makes the primary menu bar expand longer than the browser window so it creates a horizontal scrolling bar and white space down the side of the page:

    http://i.imgur.com/x8TW45f.jpg

    Thanks

    Reply
    • I just added the following to the div.logo_container and it has fixed it not sure if this is the best method?

      padding-left: 30px;
      padding-right: 30px;
      margin-left: -30px;
      margin-right: -30px;

      Reply
      • Hi Andrew, thanks for getting in touch and for sharing your solution. The issue seems to be occurring because Divi is now setting the logo_container to 100% width (which it didn't when I originally came up with the customization). I can't see any issues with your method, but a slightly simpler method is to set the width of the logo_container to "auto". That solves it without the need for padding / margin adjustments. I've updated the code in the post above to do this, and have fixed it in the next version of Divi Booster (2.5.7). Thanks again!

        Reply

Leave a Reply to dan Cancel reply

Your email address will not be published. Required fields are marked *