A transparent fixed header that overlaps your page's content can add a modern and elegant touch to your website.
This design technique keeps the header visible while allowing your content to shine through, enhancing aesthetics and navigation.
This article will guide you through the steps to create a transparent fixed header layout using Divi, ensuring seamless and stylish integration with your site's overall design.
Using Divi's Theme Builder, a custom Global Header layout can be created, giving us access to a wide range of design options.
Create a Global Header layout
Go 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
Basic layout styling
Open the Section's settings - which contains the entire Header layout - expand the Background option group, and set the Background color to transparent
Open the Section's settings, go to Design Tab → Spacing → Padding, and set 0px for Top and Bottom padding
Open the Section's settings, go to Advanced Tab → Scroll Effects, and set it to be Sticky at the Top
Go back to the Content Tab → Background → Background color, enable the Sticky State, and set a solid color
Open the Row's settings, go to Design Tab → Spacng → Padding, and set 10px for Top and Bottom padding
Open the Menu module's settings, go to Content Tab → Background, and remove the Menu module's background color
Open the Row's settings and go to Advanced Tab → Position and set its position to be absolute
Set the Row's Location to Top Center
Pro Tip: Because we have set the Row's Position to be Absolute, the Section will have a 0px Height. To fix that, we must set the Section's Min Height (for the Sticky State) as a fixed value.
The value (in px) on this demo will be 98px. This value will depend on other elements and design settings, such as the logo height or the font-size and line-height used on the Menu module
The result can be seen below:
The Page is not scrolled:
The page is scrolled:
