A transparent fixed header that overlaps your page content gives your site a clean, modern look without sacrificing navigation. It stays visible as users scroll while letting your content show through - improving both aesthetics and usability.
Divi's Theme Builder is where this all comes together. It lets you build a custom Global Header with full control over transparency, position, and styling to match your site's design.
Create a Global Header layout
Navigate to WordPress Dashboard → Divi → Theme Builder and create a new Global Header layout.
Add a 1 Column Row
Add the Menu module, set a logo image, and choose the WordPress menu to be used as the website navigation menu.
Configure the Section
Open the Section's settings, which contains the entire Header layout.
In the Section's Content tab → Background, expand the Background option group, and set the Background color to transparent.
Go to the Section's Design tab → Sapcing → Padding and set to 0px the Top and Bottom Padding.
Go to the Section's Advanced tab → Scroll Effects and set it to be Sticky at the Top.
Go to the Section's Content tab → Background, choose the Sticky State and set a solid background color, or a background color with transperancy.
Go to Secetion's Design Tab → Sizing and set a value for the Min Height.
⚠︎ Notes:
The value used for the Min Height option depends on how tall the Menu module is. You can start with a 90px and increase/decrease so that the Row and the module appear vertically centered.
The Min Height value is required, since the Row inside the section is going to be positioned absolutely.
Configure the Row
Open the Row's settings and go to the Row's Design Tab → Spacing → Padding and set to 10px the Top and Bottom Padding.
Go to Row's Advanced Tab → Position and choose Absolute, and for Alignment choose Top Center.
Configure the Menu Module
Open the Menu module settings and go to the Content tab → Background.
Remove the Menu module's default white background color by clicking the Trash icon.
The results
When the page is not scrolled, the Header area overlaps the page content.
When the page is scrolled, the Header area displays a background color.
