To make the header transparent, add the following code on the Advanced > Custom CSS field of the header when editing the header (click on settings / advanced, if you have selected a widget, click the ESC key):
selector,
.elementor-editor-active selector{
z-index: 2;
position: absolute;
top: 0;
right: 0;
left: 0;
}
Notes:
• Literally keep the word “selector”.
• If some content is overlapping the header, try changing the z-index to a big value like 99 or 9999.
• This solution should work on most of the themes, including Astra. But it is recommended to use this CSS instead for Astra, because it will allow you to keep using the “Enable/Disable Transparent Header” option for a specific page (or whole site on Customizer).
To limit the transparent header to the homepage, use this code instead:
.home selector,
.home.elementor-editor-active selector{
z-index: 2;
position: absolute;
top: 0;
right: 0;
left: 0;
}
On Astra, you can enable or disable the transparent header for a specific page, when editing the page from the WordPress Editor (click on Exit Elementor Editor).
