Fixing Sticky header

Luvchainstore
New Member
3 0 0

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

0 Likes

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")
    }
}
Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
0 Likes