How can I adjust header opacity on my website?

Technical Q&A
1

Hello! I have looked around here in the community but couldn’t find a solution that worked for me. Because I changed the name of the theme I can’t see what the original name is, so I cant troubleshoot…

How do I change opacity in my header?

website name: scandidoll.se

Password: hiapru

Thanks!

2

hii, @Raxecommerce
Can you give me a screenshot of what you want so,
I can solve it perfectly.
Thank You.

3

Thanks for replying Zworthkey!

Raxecommerce_0-1632385625581.png
Raxecommerce_0-1632385625581.png1920×918 299 KB

The header is black, I want to change the opacity to make it more transparent.

4

hii, @Raxecommerce
paste this code on top of the timber.scss file.

.site-header {
    opacity: 0.4 !important;
}

Thank You.

5

Thank you!

I also need to change opacity on top header menu.

Thanks for your patience.

Raxecommerce_0-1632389125957.png
Raxecommerce_0-1632389125957.png1891×962 316 KB

6

Paste this code on top of the timber.scss file.

.nav-bar {
    opacity: 0.4 !important;
}

Thank You.

7

Hi @Raxecommerce ,

Please follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > timber.scss.liquid and paste this at the bottom of the file:

.site-header {
opacity: 1 !important;
}

You can change 1 to 0.8 or 0.9,… it will help to change the opacity.

Hope it helps

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

1 Like