How can I adjust the opacity of my website header?

[Christine1065]

Hello! I wanted to see if I could make my header the same opacity as it is when hovering. I would also like to make the color of the background of menu items transparent when hovering.

https://portrait-coffee.myshopify.com/

[BriskDevelopers]

You just need to add below code in your assets/theme.min.css file,

.template-index .header-section:not(.sticky-header) .overlay-header:hover{
background-color: rgba(185, 98, 40, 0.5) !important; 
}

Regards,
Jay Gandhi

[Christine1065]

Thank you so much! How can I make the menu items transparent when I hover over them as well? The opacity didn't apply to them!

I also wanted to see if I can make the caption for the photo right below the header have 50% opacity as well.

[BriskDevelopers]

Add this code for menu,

.site-nav__dropdown.standard-dropdown li:hover,.site-nav__dropdown.standard-dropdown li:hover>.site-nav__link,.site-nav__dropdown .site-nav__link {
background-color: rgba(185, 98, 40, 0.5) !important; 
}

[Christine1065]

last one! How do i change the opacity for the caption on the photo below the header?

[PageFly-Richard]

Hi @Christine1065 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Theme.min.css

.template-index .header-section:not(.sticky-header).overlay-header:hover{
   background-color: rgba(185, 98, 40, 0.5) !important; 
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly