How to Make Your Divi 4.0 Header Fixed or Sticky
The most common question that keeps coming up again and again with Divi 4.0’s new Theme Builder is, “How can I make my header fixed or sticky?”
Divi’s default header has a built in option to make the header or nav menu fixed on scroll. This makes it stick to the top of the screen when the user scrolls, to all the important navigation menu links are right within reach. However, if you’re creating a custom header with Divi 4,0’s new theme builder, then there is currently no built in option to make it stick automatically.
To be clear, if you don’t want to use the new header builder in Divi 4.0, the previous header will continue to work with the built in fixed option.
Also, Elegant Themes has made it clear that a new feature is on its way that will allow you to make any section/row/module sticky, and this will give you everything you need and more to make your header stick to the top of the screen.
What do you want to stick? The whole header or just a part of it?
We actually have two tutorials, and depending on what you want to stick will depend on what tutorial to watch.
If you want your entire header to stick, then watch the first tutorial and the corresponding code that goes with it. But if you want just part of your header to be sticky (while the rest continues to scroll) then watch tutorial 2.
Tutorial 1: How to Make Your Entire Divi Header Fixed
This tutorial is for making your entire Divi 4.0 header fixed. If you want to make part of your header sticky, then scroll down. 🙂
Step 1: Add the CSS ID and CSS Class to the SECTION of your Header Template Layout.
Step 2: Add the following CSS to your Divi Theme Options (or wherever you prefer to add custom CSS):
Tutorial 2: How to Make Only Part of Your Divi Header Sticky
Step 1: Add the following CSS to your Divi Theme Options custom CSS box (or to your custom Divi Child Theme style.css)
Step 2: Within the Divi Theme Builder, open the header you’d like to customize, and add the divi-sticky-header CSS ID to the custom CSS ID input field for the section/row you’d like to make sticky.
Step 3: Add a code module in the header template, and add the following code: