Helix Template – Transparent Header - Question | JoomShaper

is live, now with multi-currency selling.

Learn More
Back to the questions

Helix Template – Transparent Header

SE

Sven Engelke

Helix Framework 1 month ago

Hello,

I nuse the Helix Ultimate Template.

I would like to achieve the following: The header should be transparent and sit on top of the page's background image. I have set the background image in the first row of the page. I inserted the following custom CSS code:

sp-header.header-sticky{

background: transparent; } However, the header only becomes transparent when scrolling down. I want the header to be transparent at all times and positioned over the background image.

Thanks!

Regards, Sven

0
3 Answers
Order by
Oldest Newest Votes
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 1 month ago #231188

Hello Sven Engelke,

Thank you for reaching out to our technical support forum. I’m sorry to hear about the trouble you’re experiencing.

Please share your site link here to check the issue. To share admin access, use the Hidden Content box. Make sure that you have a full site backup before sharing.

Best regards

0
SE
Sven Engelke
Accepted Answer
1 month ago #231212

Hello!

I was able to solve the problem. I had to set the header position to "absolute" and then make the background transparent using:

sp-header {

background: rgba (0,0,0,0); }

Regards, Sven

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 month ago #231214

Hi Sven,

example, this also should work 

#sp-header {
  height: 72px;
  width: 100%;
  position: fixed;
  z-index: 991;
  background-color: rgba(0,0,0,0) !important;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);}
0