The Ultimate Divi Bundle - 5 Divi plugins. 1 great price.

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;
    }
}

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.