Fixing Sticky header

[Luvchainstore]

Hey so my Store's URL is https://luvchain.store 

I just recently installed a sticky header but it is transparent on the main page and on product pages the header is too large so it blocks the top half of letters on those specific pages. I was wondering how to make the background for the sticky header solid color on the main page to avoid the jumbled look while on category pages I would like the header to be smaller or maybe move to the category name down some? Any help would be great. Thanks

[DeepCode]

Hi @Luvchainstore 

Can you try to add the css code below to your theme.scss.liquid file?

.black-header{
    background-color: #111 !important;
}

.site-header *{
    color: #fff !important;
}

.site-header .burger-icon{
    background-color: #fff !important;
}

.template-collection .site-header{
    background-color: #111 !important;
}

#CollectionSection{
    margin-top: 80px;
}

And add the javascript code below your theme.js file?

window.onscroll = function() {
   // You can change the height for your need
    if (document.body.scrollTop > 700 || document.documentElement.scrollTop > 700) {
      $(".site-header").addClass("black-header")
    } else {
      $(".site-header").removeClass("black-header")
    }
}