Unable to make the header transparent

Solved
Harmanrewari
Tourist
6 0 0

Hello everyone,

So I'm using a custom theme that I bought but I'm unable to find an option to make the header transparent.

I'm using the Jewelry theme for Shopify, is there some snippet of code I can add and make the header translucent/ change the opacity of the header.

Would be grateful for any help!

0 Likes
suyash1
Shopify Partner
1952 195 295

@Harmanrewari - it will need custom css, please share your website link

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly
KetanKumar
Shopify Partner
14132 1646 5072

@Harmanrewari 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Harmanrewari
Tourist
6 0 0

Thank you for your quick help.

Here's the website URL for your reference - https://vcollectionsonline.com/

0 Likes
paramSoft
Shopify Partner
1424 233 621

Please provide website url and if your store is password protected then also provide password

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
paramSoft
Shopify Partner
1424 233 621

Please place this code at the end of theme.scss

.templateIndex header#top {
    background: transparent;
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
suyash1
Shopify Partner
1952 195 295

@Harmanrewari - please add this to the end of cs.styles.css and check

#top, header#top.affix{background: rgb(234 234 234 / 30%);}
you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly
Harmanrewari
Tourist
6 0 0

@suyash1 this worked thank you!

The only issue I'm still facing is that when I'm on top of page, it doesn't become translucent but only when I start to scroll down. Is there a way this can be translucent when I'm on top of page?

0 Likes
suyash1
Shopify Partner
1952 195 295

This is an accepted solution.

remove last line and add this, same as previous line just added !important, adjust number 30 as per need

#top, header#top.affix{background: rgb(234 234 234 / 30%) !important;}

 

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly
Harmanrewari
Tourist
6 0 0

Thank you @suyash1 that helped! Much appreciated!

@paramSoft thank you for your help too!

0 Likes