Header changes to opaque

The main page of my site displays with transparent header as long as the browser is almost full screen. The header changes to opaque when window is smaller. Would like header to remain transparent (if user is not scrolling down)
easeandlightness.com

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 991px){
      
      .site-header{
        background-color: transparent !important;
        height: 0 !important;
        padding: 0 !important;
      }
     
      
      .site-header .row,
      .site-header .container,
      .site-header .col-md-4{
        height: 0;
        overflow: visible;
      }
      
      .site-header .row{
        position: relative;
      }
      
      .site-header .col-md-4{
        margin-bottom: 0;
      }
      
      .site-header .col-md-4,
      .site-header .col-md-8{
        height: 0;
        overflow: visible;
        position: relative;
        z-index: 99999;
      }    

      .site-header .col-md-8{
        position: absolute;
        top: 120px;
        left: 0;
      }  
      
    }

Regards,
Kharis

Kharis, Thank you so much for your reply.

WP is preventing me from publishing:
CSS%20Error

Brandon

Kharis, Whoops sorry. My mistake of course left off the last bracket.

It works great!

No problem!

I am closing this topic for future replies.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis