How to Create a Sticky Header in Divi 5

A sticky header keeps your navigation visible while users scroll the page, making it easier to access key links at any time. In this guide, you’ll create a sticky header in Divi 5 and refine it so it remains compact, readable, and unobtrusive while scrolling.

Final Result

Your header will remain fixed at the top of the screen as you scroll, while taking up less space and staying clearly separated from the page content. This keeps navigation accessible without getting in the way.

The preview below shows how the header behaves on both desktop and mobile.

Before You Start

Divi includes built-in options to make elements sticky on scroll, and that’s what we’ll use here. Beyond enabling the sticky position, we’ll also refine spacing and styling so the header remains balanced while scrolling.

Step 1. Open Your Header Template

Go to Divi → Theme Builder and edit your Global Header, or any other header you’d like to make sticky.

If you haven’t created a header yet, follow this guide on creating a header in Divi 5. That’s the header used in this tutorial.

Step 2. Enable Sticky Position

Divi includes built-in options that allow you to make any element sticky on scroll — section, row, column, or module.

For headers, it’s best to apply the sticky position to the main header section, not individual elements inside it.

Select the header section, go to Advanced → Scroll Effects, and set Sticky Position to Stick to Top.

This will keep the header fixed at the top of the screen as users scroll.

Step 3. Adjust the Sticky Header Design

Once the header becomes sticky, it needs a few adjustments to stay usable and visually balanced.

Add a Background for Better Contrast

Because a sticky header remains on top of page content while scrolling, it should have a solid background so the menu stays readable.

If the background color is applied to the Menu module instead of the header section, it may not span the full width of the page. In that case, move the background color to the header section instead.

For this example, we’ll use solid background colors for both normal and sticky states. The normal state will be lighter, while the sticky state will be darker.

This subtle difference helps indicate the change in state while scrolling without being distracting. It also keeps the header readable regardless of the content behind it.

Set the normal background color in the header section under Content → Background → Background Color.

Then open the Background Color field’s responsive options and set the darker color for the sticky state.

Reduce the Header Height on Scroll

To keep the header from taking too much vertical space, reduce its height in the sticky state. This helps maintain more visible page content while scrolling.

Start by setting the top and bottom padding for the normal state in the Menu → Design → Spacing. In this example, we’ll use 12px for both.

Then switch to the sticky state and apply smaller padding values (0px).

When the sticky state activates, the reduced padding makes the header more compact. Scrolling back up restores the original spacing.

If your header still feels too large, reduce the logo size and button padding for the sticky state if needed. Just make sure they remain easy to read and tap on mobile.

Add Subtle Separation from Content

When using a sticky header, it’s important to separate it from the page content while scrolling. Without this, the header can blend into the page, especially on longer scrolls.

You can achieve this by adding a subtle shadow, border, or by slightly adjusting the background color in the sticky state, as we did by using a darker background.

The goal is to keep the header clearly distinct without drawing too much attention.

Step 4. Check the Sticky Header on Mobile

Preview the header on tablet and phone views, and adjust spacing if needed.

Sticky headers are more noticeable on smaller screens, so keeping them compact is important. Make sure the header doesn’t take up too much vertical space or cover important content.

At the same time, avoid compressing it too much. Menu items, buttons, and the logo should remain easy to tap and readable without zooming. Tight spacing can make the header harder to use.

Here is how the sticky header looks on tablet:

And here is the phone preview:

Common Mistakes to Avoid

When implementing a sticky header, avoid the following:

Leaving the header too tall
A large sticky header takes up too much space and can feel intrusive, especially on smaller screens.
Not adding a background
Without a solid background, menu items can become hard to read depending on the content behind the header.
Including too many elements
Too many items make the header feel cluttered and reduce usability. Keep it focused and easy to scan.
Ignoring mobile spacing and usability
Spacing that works on desktop may not work on mobile. Always check how the sticky header behaves on smaller screens.
Applying sticky to the wrong element
Making individual modules sticky instead of the main section can lead to inconsistent behavior.

Conclusion

You’ve created a sticky header in Divi 5 that stays visible without taking up too much space.

Adjusting spacing, background, and a few layout details makes a big difference in how the header feels while scrolling, especially on longer pages. From here, you can refine its behavior further.