Sticky header (transparent on home page, white background with black on other)

[Atharva]

Hi,

I am using the Brooklyn theme and want to make my header sticky. I found multiple solutions for making the header sticky but I have a very specific requirement.

I want the header to be transparent with white text (when Home page loads) but when I start scrolling, I need the header background as White and text on it as Black.

On other pages, I need the header background as White and text on it as Black.

Here's the link to our current store: https://atharvabhapkarstore.myshopify.com/?_ab=0&_fd=0&_sc=1&key=83fa3ff282f3f6e23c4967b18b749de439a...

Can someone please help me?

Thanks in advance.

[rsdimitrov]

Hi @Atharva 

There are many ways to skin a cat and the proper one depends on the result you want to get.

Why do you need a sticky header for your website?

[Atharva]

Hi @rsdimitrov ,

The reason we need a sticky header is that the header should follow the user wherever he/she scrolls. This will make their navigation easier. Also, the reason for having a transparent header at homepage is because we want slideshow at homepage to show as full while later, it makes it easier to read the text on their scroll.

Hence, the requirement - hope it makes sense.

Thanks.

[rsdimitrov]

Hi @Atharva 

Thanks for the explanation!

Well, your next step is to get one of the solutions you've found for sticky header and apply it to the site.

Then I can look into the new code and tell you what needs to change where, so that the header matches your needs.

[ZenVibezStore]

Hey @rsdimitrov 

That is exactly what I was looking for, may you assist me as well?

[rsdimitrov]

Hey @ZenVibezStore 

I'd be happy to help you.
What is the address of your store?

Is it by any chance https://zenvibes.shop/?

[ZenVibezStore]

@rsdimitrov its zenvibezstore.com
I have found another users website which has exactly what I want to do with mine, just his header after scrolling pops instantly to white, is it possible to make with little fading effect ? 

Also it has a nice underline under heading which is following along, looks perfectly fine. 

Password: 123zen

[ZenVibezStore]

https://swagthedogshop.com/

thats the website

[rsdimitrov]

@ZenVibezStore 

I saw your site, it is looking good. 🙂

So, here is what I'd suggest regarding your sticky header issue:

0. Make a copy (for backup) of your published theme (Actions > Duplicate on the Themes screen in Shopify Admin)

1. Follow these instructions to get to the theme.scss.liquid file on your store, but don't use their code:

https://community.shopify.com/c/Shopify-Design/BROOKLYN-THEME-Sticky-header-with-Logo/m-p/449685/hig...

2. Then paste this code instead, at the end of the file:

.header-wrapper, .header-container {
  position: fixed;
  z-index: 1;
  background-color: rgba({{ settings.color_body_bg }}, 0.0);
  width: 100%;
}
.header-sticky .header-wrapper {
  background-color: rgba({{ settings.color_body_bg }}, 1);
  @include at-query($min, $medium) {
  .logo img{
    height: 60px;
   }
  }
  .site-nav {
      transition: all .3s ease, height .8s ease;
   -webkit-transition: all .3s ease, height .8s ease;
    -o-transition: all .3s ease, height .8s ease;
    margin-top:0 !important;
  }
}
.header-sticky .header-wrapper {
}
.shopify-payment-button {
  z-index: 0; 
}

3. Save the file, open your website and refresh

4. Then come back here if anything isn't looking as you'd expect or want it to and I'll help you do the little tweaks.

[ZenVibezStore]

@rsdimitrov thank you with such a fast reply. 
Okay so I've added code and it looks like its almost about to work but there are some things:
1. On home page header stays sticky, but its still transparent after scrolling. would love to make it appear white background just when I start scrolling, but with fading effect.
2. On every other page header looks fine and sticky as I wanted, just looks like it covers some text at top of the page. Like a layer on top not next to each other.
3. And small underline under header is missing.
With these 3 fixes everything would be perfectly fine 🙂

[rsdimitrov]

@ZenVibezStore 

Hey! Thanks for the collaborator account approval.

I think I've covered 1 and 2, but I doubt about number 3—the small underline.

Check your site now and tell me if the bottom border that appears on the header on scroll is what you meant by the small underline.

[ZenVibezStore]

@rsdimitrov Everything looks perfect! Getting closer to premium theme! Appreciate that.
Just small notice, on homepage scrolling through "map" layer, map box goes on top of header and announcement box. Probably I won't use this feature, just letting you know.
It be honest would love to ask you for 2 more things to help me solve. 
1. Would love to import newsletter subscription box to footer just like in Debut theme , instead of homepage layer, so it would be visible in every page, and would save some homepage space.

2. Is it possible to change background image ? I saw someone leaving some codes to do that, but I could not managed that.

[rsdimitrov]

So here is the final, working, sticky header for Brooklyn Shopify theme code and instructions everybody is looking for. 

This solution requires you to edit two files—theme.scss.liquid and theme.js.liquid of your Brooklyn Theme

1. Go to Online Store > Themes
2. Make a copy (for backup) of your published theme ("Actions" button > Duplicate)
3. Open up the Theme Code editor of your published theme (if the store isn't getting any traffic) or your theme copy, if you'd like to test things out first, before showing the result in front of your visitors
4. Search for "theme" in the top left search box. Open the "theme.scss.liquid" file. Paste this code at the end of the file:
   

   /* Sticky header for Brooklyn code */
   .header-wrapper, .header-container {
     position: fixed;
     z-index: 10;
     background-color: rgba($colorBody, 0.0);
     width: 100%;
   }
   
   .header-sticky.header-wrapper {
   
     background-color: rgba($colorBody, 1);
     border-bottom: 1px solid rgba($colorTextBody, 0.2);
     transition: all 0.5s ease-in-out;
     -webkit-transition: all 0.5s ease-in-out;
     -o-transition: all 0.5s ease-in-out;
     
     @include at-query($min, $medium) {
     .logo img{
       height: 60px;
      }
     }
     
     .site-nav {
       transition: all 0.3s ease-in-out, height .8s ease;
       -webkit-transition: all 0.3s ease-in-out, height .8s ease;
       -o-transition: all 0.3s ease-in-out, height .8s ease;
   
       margin-top:0 !important;
     }
     
   }
   
   .header-sticky a {
     color: $colorTextBody !important;
   }
   
   .header-sticky .burger-icon {
     background-color: $colorTextBody !important;
   }
   
   body:not(.template-index) .main-content {
   	padding-top: 160px; /*or another number as necessary*/
   }
   
   .shopify-payment-button {
     z-index: 0; 
   }

5. Save the file. You may preview the theme you are editing if you want to see how are you doing. 
6. Open theme.js.liquid. Paste this code at the end of the file:
   

   /* Sticky header for Brooklyn code */
   $(window).scroll(function(){
       if ($(this).scrollTop() > 150) {
          $('.header-wrapper').addClass('header-sticky');
       } else {
          $('.header-wrapper').removeClass('header-sticky');
       }
   });

   This code tells the header to change style after scrolling down more than 150px. Without it your header will be sticky, but won't know when to change colors.
   
   
7. Save the file and preview your theme. That's it.

This code takes care of the common issues with similar codes you may find on the forum:

• header getting sticky, but navigation items becoming invisible/white
• header covering part of the page
• header being cover by map section

[jtan]

does anyone else get an issue with their cart when the header is sticky. 

When i open the side cart the frozen header cuts off the top of the cart. 

Anyone find a work around

[rsdimitrov]

@jtan What's your store URL?
I may be able to fix this, but I have to see the issue live on the site first.

[Zag4242]

Hi @rsdimitrov 

This works great, I am curious if there is a way to make the stick header auto hide when scrolling down, then reappear when scrolling up (for Brooklyn theme)?

This topic also discussed in the below links, but there is not yet a solution for Brooklyn 

https://community.shopify.com/c/Shopify-Design/Sticky-header-that-auto-hides-when-scrolling-down-for... 

https://community.shopify.com/c/Shopify-Design/Sticky-header-menu-auto-hide-when-scroll-down/td-p/78...  

[beardpans]

Oh brother!!!! thank you so much!!!!! I've been looking for this for weeks!!! 

Quick thing... If I have sticky product pictures on product page, how do I make them to stick under the sticky header?

Thanks again!

[rsdimitrov]

@beardpans Please share your store URL so that I can check if there is an easy fix for that.

[beardpans]

Hi @rsdimitrov thanks for the reply. I think I figured it out a few weeks ago playing with margins on the code. my store url is www.beardpans.com if you want to take a look and check that it works correctly

[mache]

Hi! Is there a way to do all this but with the Debut theme? I can't figure out how to do it 😞