Debut Theme - transparent header but solid background on scrolling

New Member
3 0 0


I want to make the header to be transparent, but it will be back to the solid background when scrolling.




This is an accepted solution.


There is no way to achieve that without some heavy coding. Hopefully someone around will be kind enough to devote their time to this. 

Basically the main issue with your current setup is that the navbar is that by adding transparency to your navbar the way it is it will make everything transparent. There is no way around that besides undergoing an overhaul and rebuilding the navbar, which would take some fair amount of work.


In addition, your navbar is covering your first section. This is dangerous. If you add any other section in first place it can look pretty broken. Also, it can block the image of your products at the product page or block essential information at other pages. 

Ideally sticky navbars should use CSS's position: sticky instead of fixed (like yours is doing) to avoid this type of issue. I'd highly suggest to talk to your developer about this and request a more adequate solution to avoid problems in the future. Having the header blocking out the view of your sections will hurt conversions. 

Kind regards,

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ How to add a slider & thumbnails to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.