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

How to make my store header transparent to the percentage I want. Or make it opaque.

Solved

How to make my store header transparent to the percentage I want. Or make it opaque.

PedroPrado
Explorer
50 0 7

How do I make my store's header a little transparent or opaque, so that I can see a little what's behind it?

Accepted Solutions (2)
Asad-Mahmood
Shopify Partner
452 80 92

This is an accepted solution.

Go to your online store -> customize -> settings -> custom css and paste this code there

sticky-header.header-wrapper.color-inverse.gradient {
    background-color: rgb(150 150 150 / 50%);
}
If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp
Fiver




View solution in original post

Asad-Mahmood
Shopify Partner
452 80 92

This is an accepted solution.

You can use this code to make background blurred

sticky-header.header-wrapper.color-inverse.gradient {
    background-color: rgb(150 150 150 / 50%);
    backdrop-filter: blur(10px);
}
If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp
Fiver




View solution in original post

Replies 8 (8)

Asad-Mahmood
Shopify Partner
452 80 92

Whats your store url ?

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp
Fiver




PedroPrado
Explorer
50 0 7
PedroPrado
Explorer
50 0 7

I want a type of Apple website. Please check it. https://www.apple.com/ 

Asad-Mahmood
Shopify Partner
452 80 92

This is an accepted solution.

Go to your online store -> customize -> settings -> custom css and paste this code there

sticky-header.header-wrapper.color-inverse.gradient {
    background-color: rgb(150 150 150 / 50%);
}
If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp
Fiver




PedroPrado
Explorer
50 0 7

Thank you!!! 

PedroPrado
Explorer
50 0 7

Oh Hello! And you know how to make it blurry?

Asad-Mahmood
Shopify Partner
452 80 92

This is an accepted solution.

You can use this code to make background blurred

sticky-header.header-wrapper.color-inverse.gradient {
    background-color: rgb(150 150 150 / 50%);
    backdrop-filter: blur(10px);
}
If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp
Fiver




PedroPrado
Explorer
50 0 7

Again, thank you.