Helix Template – Transparent Header - Forum | JoomShaper
Staff replied Helix Framework

Helix Template – Transparent Header

Asked by Sven Engelke 2 months ago Last activity 2 months 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

3 replies

Oldest first Newest first Most helpful
Ofi Khan Staff
2 months ago

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

Sven Engelke Asked this
2 months ago

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

Paul Frankowski Senior Staff
2 months ago

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);}
Log in to reply.