How to Fix the Divi Header on Mobile
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.
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 create a floating call to action (CTA) bar on mobile using the WordPress Divi theme
Here’s a quick tutorial showing you how to make a floating call to action (CTA) bar on mobile using the Wordpress Divi theme.
Fixed CTA bars are commonly used on mobile viewports and can be used at the top or bottom of the viewport and use scroll or fade in animations in order to draw attention.
They can be effective tools for increasing user conversion on mobile devices where attention spans are shorter than your typical desktop user.
How to create cool custom buttons for the Divi wordpress theme
Are you bored by divi themes existing button modules? In this post I’m going to show you a quick and simple method on how to create custom divi buttons with incredible animated hover effects to engage your website visitors. Let’s ditch the boring default buttons and create something truly unique for your divi website … your website deserves it!
How to add a custom shopping cart icon to divi with a product counter
In this post I’m going to run you through how to switch out the default Divi Woocommerce shopping basket icon for a custom shopping cart icon which allows you to not only use a completely custom icon, but also has a product counter which lets your users know what’s in your shopping cart.
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
Get the Divi Theme
Did you find this post valuable? If so, please consider sharing to help me, help more people
More Posts
How to create a floating call to action (CTA) bar on mobile using the WordPress Divi theme
Here’s a quick tutorial showing you how to make a floating call to action (CTA) bar on mobile using the Wordpress Divi theme.
Fixed CTA bars are commonly used on mobile viewports and can be used at the top or bottom of the viewport and use scroll or fade in animations in order to draw attention.
They can be effective tools for increasing user conversion on mobile devices where attention spans are shorter than your typical desktop user.
How to create cool custom buttons for the Divi wordpress theme
Are you bored by divi themes existing button modules? In this post I’m going to show you a quick and simple method on how to create custom divi buttons with incredible animated hover effects to engage your website visitors. Let’s ditch the boring default buttons and create something truly unique for your divi website … your website deserves it!
How to add a custom shopping cart icon to divi with a product counter
In this post I’m going to run you through how to switch out the default Divi Woocommerce shopping basket icon for a custom shopping cart icon which allows you to not only use a completely custom icon, but also has a product counter which lets your users know what’s in your shopping cart.
0 Comments