Transparent header in Astra using Elementor Pro

  • Because the Astra header is being replaced with an Elementor header. So the original Astra header is totally gone.
  • But I made some custom code to make Elementor’s header to be transparent header when you activate that option.
  • To keep using the Enable/Disable Transparent Header option, follow the same instructions to make a header transparent, but use this code instead:

WHERE DO YOU PUT THIS?? ← It’s documented here: instructions to make a header transparent,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).

  • On Prairie the header is not from Elementor (even when we have Elementor we didn’t create a custom one)
				
					.ast-theme-transparent-header selector,
.elementor-editor-active.ast-theme-transparent-header selector{
    z-index: 2;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}
				
			
    • Because the Astra header is being replaced with an Elementor header. So the original Astra header is totally gone.
    • But I made some custom code to make Elementor’s header to be transparent header when you activate that option.
    • To keep using the Enable/Disable Transparent Header option, follow the same instructions to make a header transparent, but use this code instead:


WHERE DO YOU PUT THIS?? ← It’s documented here:
instructions to make a header transparent,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).

  • On Prairie.. the header is not from Elementor (even when we have Elementor.. we didn’t create a custom one)

Powered by BetterDocs

Newsletter

Subscribe and stay connected through our Newsletter. We send out important news, tips and special offers.

  • This field is for validation purposes and should be left unchanged.