🎁 Get Up To 70% Off During Divi Summer Sale! Get Divi

How to Make Header Fixed on Mobile in Divi Theme

Blog, Divi Tutorial | 0 comments

Do you want to make the header Fixed on Mobile in Divi theme?

In this article you will find step by step by step instructions to make the mobile header fixed in Divi theme.

Before you read further it is important to understand that the code will only work for the default header. The code will not work for a header built with Divi Theme Builder. If you have built your header using Theme Builder then you should be using Sticky Feature to make your menu sticky.

The problem is that the mobile header and menu in the Divi theme is not fixed or sticky by default. Even when you are using fixed header for desktop the mobile menu still does not become sticky when you scroll down the page.

There are no options in the Divi theme to make the mobile menu sticky.

However it can be made sticky with a Snippet of CSS Code.

Add CSS Code to Make Mobile Header Fixed

To make the mobile header sticky you have to add the code below to your website.

Go to your WordPress Dashboard > Divi > Theme Options > Custom CSS and then add the following CSS code.

.et_fixed_nav #main-header {
    position: fixed;
}

If you are not sure where to add the CSS Code then please check the screenshot below.

Divi Theme Options Custom CSS

Once you have added the code in the Divi Theme Options then the mobile header should become fixed.

It will be fixed to the top as you scroll down the page.

Leave a comment below if you have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.

Here are some more Divi tutorials that you can check next.

You can find a complete list of all the help articles related to Divi on the Divi Tutorials page.

About the Author

The author of learnhowwp.com is a WordPress expert with over a decade of experience, specializing in Divi. Since 2014, they have built numerous WordPress sites and developed 8 Divi plugins with over 30,000 active installations. A former support team member at Elegant Themes, they launched learnhowwp.com in 2020 to share their in-depth knowledge of Divi. Now home to over 65+ articles dedicated to Divi tutorials and insights

0 Comments

Submit a Comment

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

Our Plugins Are Already Being Used On 30,000+ Amazing Websites.

We offer a 30 Day Money Back Guarantee on all plugins, so joining is Risk-Free!