Change Header to Transparent on Spotlight

ottesando
Tourist
4 0 1

Hello!

 

I'm using spotlight theme and want to change the header to transparent with white logo on the home page. On scroll I want it to sticky with a white background and dark logo. On all other pages I want it to be white background and dark logo - as it is currently.

 

Could someone tell me how to code this? My store is: www.ottesando.com

 

Thanks!

 

Replies 2 (2)

BSS-Commerce
Shopify Expert
3398 449 503

Hi @ottesando ,

Please follow these steps:

Step 1: Go to Themes => Choose Edit code

view - 2023-12-05T094149.582.png

Step 2: Find file base.css and add the following code at the end of the file:

.header__heading-logo {
    display: none;
}
.scrolled-past-header .header__heading-logo {
    display: inline-block;
}

view - 2023-12-05T094258.759.png

Hope it helps @ottesando  

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

ottesando
Tourist
4 0 1

Thanks for your help! It didn't work unfortunately. Do we need to add something to theme.liquid or header.liquid?