Nav color on home page before scrolling

Hi There,

I’ve run into another problem I can’t seem to find the solution for. the way that the theme is setup, the nav bar is transparent on the home page before you scroll down, then turns a solid color when you start to scroll. This doesn’t work well for my site because the menu items clash with the changing colors of the images on the full page image slider.

What I would like to do, is make the nav have a low opacity background color on the home page (instead of transparent), which then changes to a higher opacity background when you scroll down. I would like this only on the home page. All other pages are fine the way they are.

I have tried the code below but it changes thew whole opacity to a low opacity even after scrolling down:
.home .site-header {
background-color: rgba(52,66,137,0.4)

Please advise what CSS code I could apply to achieve this


Hi there,

Please use this CSS code instead:

.site-header {
    background-color: rgba(52,66,137,0.4);

.site-header.float-header {
    background-color: rgba(52,66,137, 0.9);


Perfect! thank you so much. I always try and figure out stuff myself first but the support you provide is phenominal.