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
0pxfor top and bottom paddingOpen 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
10pxfor 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
heightThe
font-sizeandline-heightused on the Menu moduleetc
The result can be seen below:
The Page is not scrolled:
The page is scrolled:
