By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

Question HELP With Header in Elementor Please!

S

szuu

New Member
Hey, I'm using the page builder Elementor with the Ocean WP theme. I'm trying to make the header overlap the image by decreasing the margin for the image and making the header a transparent black colour. However, when I do this the background for the header is solid and you cannot see the image in the background. Does anyone know how to fix this.. not sure what more I can do if I played around with the margins and colour transparency.. any help would be appreciated. Thank you.

Snip 2020-02-01 18.04.04.jpg
 
elementor official
sms-design

sms-design

Member
Are you using the free Elementor or Pro version
 
elementor official
sms-design

sms-design

Member
In the pro version you can build your own header template via the Theme Builder

 
elementor official
S

szuu

New Member
Yes I built my own header but I'm facing the issue with the header not being transparent...
 
elementor official
dhanmer

dhanmer

New Member
Have you made the section background color clear? Also, you may need to add the following CSS code in the "Custom CSS" section within the Advanced tab:

.site-header {
position: absolute!important;
width: 100%;
left: 0;
z-index: 500;
}

Hope this helps.
 
elementor official
S

szuu

New Member
unfortunately that custom code didn't work either :( and yes the background colour is set to clear.
 
elementor official
dhanmer

dhanmer

New Member
Could you maybe take a screenshot so I can see what exactly is happening?
 
elementor official
S

szuu

New Member
So just to quickly explain what I want to do with the header, I want to make it a transparent black that is on the top of the image. (I don't want to make it completely transparent because I'm afraid that the menu text won't show properly so that's why I'm making it slightly black). Here are the steps I took to try to make that happen...

Snip 2020-02-05 12.48.26.jpg


The section colour is set to a very light black (almost transparent)

Snip 2020-02-05 12.48.51.jpg


The header background colour is cleared.

Snip 2020-02-05 12.50.38.jpg


I tried the custom CSS in the header settings and it's not working.. it looks like there might be an error with the '!' beside 'absolute' but I'm not sure since I don't know coding..

Snip 2020-02-05 12.51.05.jpg


Here it shows that the top margin of the image is set to -73 so that the header can overlap the image.

With all of these changes, I was hoping that I would be able to create that transparent black header that overlaps the image but it's showing as a solid colour and you can't tell that the image is underneath the header. Am I missing anything or is my element or just broken lol?
 
elementor official
sms-design

sms-design

Member
try add this to your custom css

#SITE_HEADERcenteredContent {
position: absolute !important;
}
 
elementor official
elementor official
Top