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
Excursionist
40 0 6

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
Pathfinder
80 13 14

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

View solution in original post

Asad-Mahmood
Pathfinder
80 13 14

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

View solution in original post

Replies 8 (8)

Asad-Mahmood
Pathfinder
80 13 14

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
PedroPrado
Excursionist
40 0 6
PedroPrado
Excursionist
40 0 6

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

Asad-Mahmood
Pathfinder
80 13 14

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
PedroPrado
Excursionist
40 0 6

Thank you!!! 

PedroPrado
Excursionist
40 0 6

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

Asad-Mahmood
Pathfinder
80 13 14

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
PedroPrado
Excursionist
40 0 6

Again, thank you.