Source: https://divicake.com/blog/how-to-make-custom-divi-header-fixed-or-sticky/

[Blog](https://divicake.com/blog/)/[Blogging](https://divicake.com/category/blogging/)

# How to Make Custom Divi Header Fixed or Sticky

By Divi Cake·12 June 2024·Updated 9 July 2024·4 min read

Whether you're designing a website for a business, blog, or e-commerce platform, a fixed or sticky header can enhance user experience by providing constant access to key menu items and calls to action.

We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/)

On this page

- [Make Your Header Sticky with Divi’s Position Options](https://divicake.com#make-your-header-sticky-with-divis-position-options)
- [Using CSS and jQuery to Fix Your Header](https://divicake.com#using-css-and-jquery-to-fix-your-header)
- [Final Thoughts:](https://divicake.com#final-thoughts)

Creating a fixed or sticky header in [Divi](https://divicake.com/go/divi/) has become significantly simpler with the introduction of the Position Options feature in the Divi 4.2 update. These new options are available in all Divi Builder modules, making it easier than ever to ensure your custom header remains visible as users scroll through your site. This is particularly useful for enhancing navigation and improving the overall user experience, as it allows visitors to access the menu and other key elements without having to scroll back to the top of the page.In this comprehensive tutorial, we’ll guide you through the entire process of using the [Divi Theme Builder](https://divicake.com/blog/divi-theme-builder-overview/) to create a custom header and set it to be fixed or sticky. Whether you’re a seasoned web designer or just starting out, this step-by-step guide will help you achieve a professional and functional header design that stands out.

## Make Your Header Sticky with Divi’s Position Options

To make a section in your custom header fixed, start by opening the Section Settings for the specific section. Navigate to the Advanced tab, then to Positions. Under Position, select Fixed. Finally, set the location to Top Center. This will ensure that your header section stays at the top of the page as users scroll.

With Divi’s Position Options, making your header sticky is easy. This feature, introduced in the Divi 4.2 update, allows your header to stay fixed at the top of the page as users scroll.

Making the Header Sticky with Divi’s Position Options

## Using CSS and jQuery to Fix Your Header

While the Position Options in Divi simplify creating a fixed [header](https://divicake.com/blog/customize-divi-header-layouts-plugins-tutorials/), they don’t allow us to dynamically change the header styles as the user scrolls, a feature found in the default Divi header.To achieve this dynamic styling based on scroll behavior, we’ll need to implement a jQuery solution. This approach enables us to customize how the header looks and behaves after a user scrolls down the page.

Read More: [Basics of Divi Responsive Design](https://divicake.com/blog/basics-of-divi-responsive-design/)

Here’s how to set it up:

- Open the Section Settings for the section you want to make sticky.
- Navigate to Section Settings > Advanced > Custom CSS ID & Classes.
- In the CSS ID field, enter dc-main-header.

In the Divi Builder, open the settings for the section you want to modify. Under the “Advanced” tab, find the “CSS ID & Classes” option, then enter your desired CSS ID in the “CSS ID” field.

Assigning a CSS id to the Divi Section

Next, navigate to your [WordPress](https://divicake.com/blog/wordpress-tutorial/) Dashboard and click on “Divi.” From there, go to “Theme Options” and then select “Integration.” You’ll find an option to add code to the <head> section of your blog. Paste the following code into that section. This code will integrate the necessary functionality for your customizations.

<script> jQuery(function($){ $(function() {    var header = $("#dc-main-header");  $(window).scroll(function() {  var scroll = $(window).scrollTop();    if (scroll >= 0) {  header.addClass("et-fixed-header");  } else {  header.removeClass("et-fixed-header");  }  }); }); });  </script>

This code dynamically adds the CSS Class et-fixed-header to the section when you scroll down, and removes it when the header returns to the top. However, merely adding the class doesn’t make the section fixed on scroll. To achieve a fixed header effect, you need to take an additional step. Navigate to your WordPress Dashboard, go to Divi, then Theme Options, and finally to [Custom CSS](https://divicake.com/blog/how-to-add-custom-css-to-divi/). Insert the following CSS code to ensure the section remains fixed as users scroll:

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

The CSS code dynamically fixes the header, allowing us to easily adjust styles for the fixed menu using the et-fixed-header CSS class. You can also use the class “et-fixed-header” to target other elements within the section and modify their styles as you scroll. This allows you to customize the appearance and behavior of various elements along with your fixed header.

Read More: [Add auto updating footer copyright in Divi without coding](https://divicake.com/blog/updating-footer-copyright-in-divi/)

## Final Thoughts:

Creating a fixed or sticky header using Divi opens up new possibilities for improving user interaction and navigation on your website. The introduction of Position Options in Divi 4.2 has streamlined the process, making it accessible even to those without extensive coding knowledge. By implementing these features, you ensure that important navigation elements like menus remain readily accessible to visitors as they explore your content.

While Divi’s built-in tools provide a solid foundation for making headers sticky, integrating CSS and jQuery allows for more dynamic customization. This approach not only fixes the header position but also enables changes in appearance and behavior based on user scroll actions. Whether you opt for the straightforward Position Options or delve into custom scripting, the result is a website that not only looks professional but also enhances usability.

In conclusion, mastering the art of creating fixed or sticky headers with Divi empowers you to deliver a seamless browsing experience that keeps visitors engaged and satisfied. Whether you’re enhancing an existing design or starting fresh, these techniques ensure your header remains a functional and stylish focal point throughout the user journey.

Read More: [Animate Your Web Page Using Divi Scroll Effects](https://divicake.com/blog/divi-scroll-effects/)

## Written by Divi Cake

Divi 5 tutorials, layouts and fixes from the team that builds Divi sites every week.

- [About Divi Cake](https://divicake.com/about/)

## Get the Divi Cake newsletter

New Divi tutorials and Divi Cake product news, by email.

First name (optional)Email

Company website

SubscribeSubscribeSubscribe

Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/)

The sign-up form needs JavaScript for its spam check.

Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do.

## Submit a comment

Comments are read before they appear. Your email is not published.

Comment

NameEmail

Company website

Submit commentSubmit commentSubmit comment

The comment form needs JavaScript for its spam check.

Thanks. Your comment is waiting for review and will appear here once it is approved.

## Do you need help with …

- [Divi 5 migration](https://divicake.com/divi-4-to-divi-5-migration/)
- [Divi websites](https://divicake.com/divi-website-development/)
- [Divi plugins](https://divicake.com/divi-plugin-development/)
- [Fix a site](https://divicake.com/fix-existing-site/)
- [Beyond Divi](https://divicake.com/beyond-divi/)
- [Technical SEO](https://divicake.com/technical-seo/)
- [SEO content](https://divicake.com/seo-content/)

## Newsletter

New Divi tutorials and Divi Cake product news, by email.

First name (optional)Email

Company website

SubscribeSubscribeSubscribe

Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/)

The sign-up form needs JavaScript for its spam check.

Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do.

## Save Annually on Divi

[Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/)

## WordPress Hosting & Tools

[100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/)

## More in Blogging

[

How to make money with Divi

Blogging10 min read

### How to Make Money with Divi

Nine ways to earn an income with Divi — affiliate marketing, services, digital products, courses, memberships, sponsored posts and ads — and what your site needs before any of them work.

15 October 2026](https://divicake.com/blog/make-money-with-divi/)

[

Customizing Divi for advanced WordPress development projects

Blogging4 min read

### Customizing Divi for Advanced WordPress Development Projects

Seven ways to take Divi past its stock settings on an advanced build: custom CSS and JavaScript, child themes, integrations, hooks and filters, and performance work.

11 October 2026](https://divicake.com/blog/customizing-divi/)

[

Selling Divi websites and child themes

Blogging10 min read

### How to Make Money Selling Divi Websites and Child Themes

How to earn from Divi three ways: building sites for clients, selling finished websites through a brokerage or marketplace, and packaging child themes for sale.

29 September 2026](https://divicake.com/blog/selling-divi-websites-and-child-themes/)