To create a transparent header, I followed the instructions in this video Wix Code | How to Create a Frozen Header That Changes as Visitors Scroll - YouTube and it works perfectly on desktop. You create two strips in the header, one transparent and one white, and use code to hide the white one until you scroll.
On mobile, the code still applies and initially the white strip is hidden and you don’t see the logo until you scroll. The problem is that there is a white background initially. The mobile editor shows a white header with a black logo, but on my phone I see only a white header with a menu and no logo. I think it is a default header background. Is there some way to hide the mobile header background as well?
The site is question is www.rgconstabbotsford.com
My code is as follows:
export function header1_viewportLeave(event) {
$w(‘#whiteheader’).show();
//Add your code for this event here:
}
export function header1_viewportEnter(event) {
$w(‘#whiteheader’).hide();
//Add your code for this event here:
}
