Sticky, transparent header not working
Several related issues when working on the header for a client's site. I first tried to get it working with the default header. What I'm trying to do is not complicated, I actually copied one of pre-built sites that had the header working correctly, but when that didn't work, I tried creating a custom header which didn't work either.
1. Default header: The first setup I created used the default header, I've set it to be sticky, using the transparent header type, but I cannot get the header to actually be transparent in the unscrolled state. I have tried every combination of header colors — including setting the header color to 100% transparent — but nothing works. As far as I can tell, I have every transparency and sticky header option enabled.
2. Custom header — background color: I found another post that suggested creating a custom header, which I did, but it's got a white background and I can't find where to change the background color.
3. Custom header — sticky: I see the "Default" "Sticky" and "Mobile" buttons in the editor but both Sticky and Mobile buttons are disabled.
Can someone please help?
Comments
Hi,
Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.
It is always a good idea to also attach a screenshot showing your issue.
Thanks
Thanks, here is the site.
I tinkered with the color settings again, the header is now working as desired except the sticky header background is black instead of the blue that I specified: https://techfusioncp.com/home-3/
Here is a screenshot of the color settings. Based on this, the sticky header background should be dark blue (with 80% opacity), but you'll see the color is black.
It is the Top Bar Left background that you must edit. Assign this color there and in Betheme -> Theme options -> Header & Subheader -> Header, and at the bottom of the setting, choose this:
Best regards
I had it set like that before but that just sets the header with the blue background in both unscrolled and sticky states. I want it to be *transparent* initially and *blue* when it is sticky. How do I do that?
Go to Betheme -> Theme options -> Global -> General, and check Transparency to Top Bar with menu.
Best regards
Alright, that worked. Really confusing.