Transparent Fixed Sticky Header in Divi [Step-by-Step Guide]

Updated for Divi 5: This header works the same way in Divi 5 (tested in Divi 5.18). The Sticky Position option is still in Advanced → Scroll Effects, the sticky colors still switch when the header gets stuck, and all three CSS snippets below work without changes.

If you ever wanted to create a beautiful transparent header fixed on scroll for your Divi website, this walkthrough is for you. It’s really easy, using just a few CSS snippets that you can copy and paste from here. In the video walkthrough, I guide you step by step through creating the header using mostly Divi options. All the instructions are covered in the video, and the blog post below lists the steps in writing plus the exact CSS code I used.

Good to know: This walkthrough was originally shared with my Divi Stylist Academy community, where students get exclusive access to in-depth design sessions like this one. The free layout with this transparent header effect is ready too: download the Transparent Sticky Header Template if you’d rather import it than build it yourself.

The video was recorded in Divi 4. In Divi 5 the settings have the same names and sit in the same places; only the CSS panel moved (Advanced → CSS in Divi 5, Advanced → Custom CSS in Divi 4).

How does a transparent sticky header work in Divi?

A transparent sticky header is a Theme Builder header section with a transparent background and Sticky Position set to Stick to Top. When it gets stuck at the top of the window, Divi adds the classes et_pb_sticky and et_pb_sticky--top to the section and switches to the Sticky values you set (here: a white background and dark menu links).

That’s why this effect needs mostly Divi options: the colors, the logo swap and the smooth transition are all native settings. CSS only moves the page content up underneath the header, so your hero image shows through it.

How to create a transparent sticky header in Divi (step by step)

You need five steps: a global header in the Theme Builder, a transparent sticky section, a Menu module with a white logo, a colored logo for the sticky state (optional), and one CSS snippet that moves the content under the header. The values below are the ones from my header and the free layout.

Step 1: Create a global header in the Theme Builder

Go to Divi → Theme Builder, click Add Global Header and choose Build Global Header. This is the same in Divi 4 and Divi 5.

Step 2: Make the header section transparent and sticky

• Background: Divi sections are white by default, so set the section’s background color to transparent (rgba(255,255,255,0)). Do the same for the row.
• Sticky background: set the Sticky value of the same background color to white (#ffffff). In Divi 5, click the Sticky icon in the option’s header (next to Hover and the responsive icons); in Divi 4, hover over the option and click the Sticky icon.
• Spacing: set the top and bottom padding of the section and the row to 0px, so the header is only as tall as the menu.
• Advanced → Scroll Effects → Sticky Position: Stick to Top (same path in Divi 4 and Divi 5). Leave Transition Default and Sticky Styles on, it gives you the smooth color change.

Step 3: Add the Menu module with a white logo

• Content: select your menu and upload the white version of your logo.
• Design → Logo: logo height 40px. Set the Sticky value of the logo’s opacity to 0%, so the white logo fades out when the header turns white.
• Design → Menu Text: white text (I used font weight 600 and uppercase), with a Sticky value of black (#000000).
• Design → Icons: Hamburger Menu Icon Color white, Sticky value black, so the mobile menu icon stays visible on the white header.
• Background and spacing: make the Menu module’s background transparent too and set its bottom margin to 0px.

Step 4: Swap in a colored logo for the sticky state (optional)

• Add an Image module under the Menu module, in the same column, with the colored version of your logo and a height of 40px (Design → Sizing → Height).
• Advanced → Position: Absolute, location center left. Now the image sits right on top of the menu logo.
• Design → Filters → Opacity: 0%, with a Sticky value of 100%.

On scroll, the white logo fades out and the colored one fades in, all with Divi options.

Step 5: Move the page content under the header

Without this step the header pushes the page down, and you see an empty strip instead of your hero image behind the transparent header. Add the first CSS snippet below to the header section (Divi 5: Advanced → CSS → Free-Form CSS; Divi 4: Advanced → Custom CSS → Free-Form CSS) or to Divi → Theme Options → General → Custom CSS.

CSS code snippets used for the transparent sticky header

There are three snippets: the first one moves the page content under the header (you need it), the other two are menu styling extras. All three work in Divi 4 and Divi 5 without changes.

Move the page content underneath the header

Here’s the bit of CSS code that moves the page content underneath the header section:

div#et-main-area {
    margin-top: -76px;
    display: inline-block;
    width: 100%;
}

@media (max-width: 980px) {
    div#et-main-area {
        margin-top: -40px;
    }
}

The 76px is the height of my header on desktop (40px on tablets and phones), so change both values to match your own header. To check the height, right-click the header, choose Inspect, and look at the size of the header section.

Change the menu link color on hover in the sticky state

This bit of code changes the color of menu links on hover, when in “sticky” state:

.et_pb_sticky.et_pb_section .et_pb_module.et_pb_menu li:hover a {
    color: purple !important;
}

Divi lets you set a Hover color and a Sticky color, but not a hover color for the sticky state only, so this one needs CSS. Replace purple with your brand color.

Add more space between the menu items

This bit of CSS adds more space between the menu items:

.et_pb_menu.et_pb_module .et_pb_menu__menu>nav>ul>li {
    margin-left: 20px;
}

Divi already adds 11px of padding on each side of every top-level menu item; this snippet adds a 20px left margin on top of that.

Does the transparent sticky header work in Divi 5?

Yes. Divi 5 keeps the same sticky options and the same CSS classes, so a header built in Divi 4 keeps working after the update, and you can build a new one in Divi 5 with the same steps. Here’s what I checked:

• Divi 5 still adds et_pb_sticky and et_pb_sticky--top to the section while it is stuck, and leaves an invisible placeholder (et_pb_sticky_placeholder) in its place, so the hover snippet works as it is.
• The Theme Builder header is still printed before #et-main-area, so the negative margin still pulls the page content up under the header.
• The Menu module keeps the Divi 4 markup (.et_pb_menu__menu > nav > ul > li), so the spacing snippet needs no changes.
• If you build the header from scratch in Divi 5, measure its height again before you copy the 76px value: new sections, rows and columns use the Flexbox layout by default, so your spacing may come out different.

And that’s it!

I hope you enjoyed this tutorial and got excellent results! Share your experience in my Divi Lovers Facebook group, or tell me there if any part caused you difficulty or was especially fun to do.

If you’d like my personal help and guidance with your web design project or white label help, check out the best ways to work with me here.