We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Transparent header - product page

Transparent header - product page

Nato0201
Excursionist
69 0 5

Hey team,

 

Wanting to make header transparent on every product page for mobile and desktop. Home page is currently transparent but product pages are not.

 

Any help would be appreciated!

 

https://ap-perform.com/

Replies 3 (3)

BSSCommerce-HDL
Shopify Partner
2305 835 907

Hi @Nato0201 ,

 

Please follow these steps:

 

1. Please navigate to Online store => Themes => Edit code

 

BssTechVenture_0-1715330200704.png

 

 

2. Search for the file "base.css" 

3. Add this code at the end of the file and save

@media screen and (min-width: 1025px) {
    .header-nav-hamburger:not(.header-hamburger--transparent) {
       background: transparent!important;
    }

}

 

This is the result

 

view (4).png

 

Hope this will helps

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Nato0201
Excursionist
69 0 5

Hey! Hasn't seemed to work. Is it meant for base.css?

Nato0201
Excursionist
69 0 5

Apologies! the header it self is transparent which is great! but It's still it's own block so I can't have a photo go behind it when the page loads if that makes sense (see attached)Screen Shot 2024-05-12 at 2.33.34 PM.pngScreen Shot 2024-05-12 at 2.33.25 PM.png