How to Fix the Divi Header on Mobile

Post By : Jim Monkhouse

As flexible as the Divi WordPress theme is, I do occasionally run into a few drawbacks now and again when it comes to the styling of certain parts of the theme. 

DWE_Blog_Divi WordPress Theme – Fix the header in position for mobile

One of the first issues I ran across when building websites using the Divi theme, was that the header would stay fixed to the top of the viewport when viewing your website on mobile. I personally find this a bit of a UX blunder as it’s nice to always have access to the top-level navigation when scrolling on mobile.  

So how do you get around this? Well, it’s easy, it actually couldn’t be easier, it just requires a few lines of CSS in your Theme Options.

On your WordPress Admin, Navigate to  “Divi > Theme Options > General” and then scroll to “Custom CSS” at the bottom and add the code block below

/*FIXING THE MOBILE MENU*/

@media (max-width: 980px) {

.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {

    position: fixed;

}

}

 

Note* – When you’re logged in to the WordPress admin, you might see a 50px gap at the top of the header when you scroll. This is not an issue as it’s to account for the WordPress admin bar and will disappear when you log out.

Jim Monkhouse
Jim is a web designer & developer with over seven years experience building websites for small business using the wordpress theme

Did you find this post valuable? If so, please consider sharing to help me, help more people

More Posts

Five Stunning Feminine Divi Layouts

Five Stunning Feminine Divi Layouts

We all know that Divi can create amazing small business websites, but clean, magazine style feminine layouts are usually the preserve of Squarespace. Here’s a list of five stunning feminine wordpress Divi Layouts that gives squarespace a run for its money.

0 Comments

Submit a Comment

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