Transparent (ie Pinned) Header

How can I have a transparent home page header in Studio, that scrolls with the page. The only way to create the transparent header is to pin the header, so can’t use a scroll effect.

I am using a new header for my home page only and the default on the rest of the site. My goal is to have a white logo and menu with no background, ie transparent, on a full screen home page video. When the visitor scrolls I want the menu and logo to fade out.

Since its pinned I can’t get it do fade out or scroll out - and the white menu text overlaps the reat of the home page and looks super sloppy.

Since I’m using Wix Studio and am dumbfounded at how much more difficult it is to create a transparent header that will scroll. This was a very basic feature of classic editor and very hard in Studio.
It took hours of trying and messing with the opacity of the cells and sections and backgrounds and page and finally a call to learn that the only way to make the header transparent is to pin it. This implementation that used to take 5 minute took hours. I tried everything but since its now pinned, I don’t know how else to make it disappear or fade out. Very frustrating.

wix-studio

set the header to sticky, you can then add a scroll effect to fade out

Thanks, Dan. The header is pinned, not sticky. Studio does not allow header transparency unless the header is pinned.
Any other ideas welcomed.

sorry was quickly replying from my mobile and didnt read you full explaination. The pinned header is able to have a a transparent backround and have a scroll effect to fade out.

I thought it was possible with the sticky header but setting the background to 0% clears the background colour but leaves a white header

Hi Dan. I was hoping that was the case, but I only have Anchor options under the curser options, no scroll options. What am I missing? :upside_down_face:

Are you sure you have the header selected ?

Yup :confused:

Not sure if it matters, but this is not a global header or default header. I have that one on all the other pages. This is a predesigned header added specifically for the home page (I made it transparent / redesigned).

That would be it then. You can have more than 1 header designed as a global header and just change what pages you want them to show on. So you can right click your header and set as Global. Then in global settings adjust what pages your headers will be on.

Dan, you Da Man! Thanks so much.
So I understand, the reason that the scroll option wasn’t available is because that new header was not set to global?

Many thanks again!

1 Like