Archived topic
Transparent Header using Elementor Page Builder
4 replies · Started by Denis on September 28, 2016
I am trying to solve a header problem in Generate Press Pro which is holding my project up.
This is an example of the header I want.
http://www.kriesi.at/themes/enfold-app/
or
http://www.kriesi.at/themes/enfold-health-coach/
I am trying to have the header with a transparent background, logo left, menu right where the top of the hero image on each page also serves as the header background. But I want to use Elementor to build the page and the header image, not the theme page settings.
I create a section in Elementor, set the background image.
I have set the theme in Customiser with; Layout - Page Header - Inside Content Area and then Above Content Area but both just end up with the hero image below the header. So then I set the Hero image to -180px margin but it then just overlays the header so no logo or menu is visible.
I know there is a section on each page of the backend where the theme allows you to add a header image but the content then has to be added by html in a content box which makes it too complicated me for adding buttons etc. to the hero image.
How can I solve this?
Thanks in advance
Hi Denis,
As you posted on FB, this was your solution:
.site-header {
position: absolute;
width: 100%;
left: 0;
z-index: 500;
}Just be careful, as adding that CSS to all pages will add it to templates that won't have an Elementor header like the 404 template, blog templates, archives etc..
I suggest using Simple CSS to add it only to the specific pages where you're using Elementor.
Tom, you can use Simple CSS on a per page basis? How would you make transparent menu for a single page?
The menu is kind of complex because there's so many elements in it.
The Page Header has this option if you're adding content using the page header meta box.
If not, you can try this:
.main-navigation {
background-color: transparent;
}Let me know if you need the other elements (hover, current etc..).
thanks I'll try it
