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

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. While all the instructions are covered in the video, the blog post below includes the exact CSS code I used.

Important!

This walkthrough was originally shared with my​ Divi Stylist Academy community, where students get exclusive access to in-depth design sessions like this one. Plus, stay tuned—I’ll soon be releasing a free layout that features this transparent header effect, making it even easier to implement on your site!

CSS Code Snippets Used:

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


div#et-main-area {
    margin-top: -76px;
}

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

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;

}

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;

}

And that’s it!

I hope you enjoyed this tutorial and got excellent results! Comment below to share your experience or tell me 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.

Have you seen our

|
We offer a great selection of high-quality Divi products to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

Join the discussion

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

Enjoing our content?

You might find this interesting…

License Details

REGULAR LICENSE

Single Site

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

EXTENDED LICENSE

Unlimited Sites

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

SUPPORT & UPDATES

Each license is a one-time payment. There are no annual fees. You get lifetime access to product updates. Support is provided for 6 months from the date of purchase.

Server Requirements

SERVER SETTINGS:

  • PHP 7.2 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)

PHP.INI SETTINGS:

  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module

PHP MODULES:

  • allow_url_fopen

Would you like to...

Consult Ania and fellow students?

Join the conversation inside our private FB group.

Would you like to...

Get support privately?

Submit a support ticket via your account page.

Ask Ania?

Submit a question for the next live Q&A session.

Consult fellow students?

Join the conversation inside our private FB group.