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.

How to add custom Icons to Divi’s social media module

How to add custom Icons to Divi’s social media module

We all know the divi social media module is an amazing tool to help you effortlessly display your social media networks, but with that convenience comes a lack of ability to customise the social media icons. If you’ve wondered how to solve this problem and customise social media icons or add new social media networks in the easiest way possible, you’re in the right place. Let’s learn how to How to add custom Icons to Divi’s social media module

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

How to add custom Icons to Divi’s social media module

How to add custom Icons to Divi’s social media module

We all know the divi social media module is an amazing tool to help you effortlessly display your social media networks, but with that convenience comes a lack of ability to customise the social media icons. If you’ve wondered how to solve this problem and customise social media icons or add new social media networks in the easiest way possible, you’re in the right place. Let’s learn how to How to add custom Icons to Divi’s social media module

0 Comments

Submit a Comment

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