FROM CACHE - en_header

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

Atharva
New Member
2 0 0

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.

Replies 22 (22)
rsdimitrov
Shopify Partner
94 8 28

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?

 

 

I help family-run Shopify stores increase sales from existing traffic Learn More
Problem Solved? Accept the solution so you can help others.
Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com
Did my answer save you time? Buy me a coffee, please 🙂 paypal.me/rsdimitrov
Atharva
New Member
2 0 0

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
Shopify Partner
94 8 28

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.

I help family-run Shopify stores increase sales from existing traffic Learn More
Problem Solved? Accept the solution so you can help others.
Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com
Did my answer save you time? Buy me a coffee, please 🙂 paypal.me/rsdimitrov
ZenVibezStore
Tourist
5 0 0

Hey @rsdimitrov 

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

rsdimitrov
Shopify Partner
94 8 28

Hey @ZenVibezStore 

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

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

I help family-run Shopify stores increase sales from existing traffic Learn More
Problem Solved? Accept the solution so you can help others.
Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com
Did my answer save you time? Buy me a coffee, please 🙂 paypal.me/rsdimitrov
ZenVibezStore
Tourist
5 0 0

@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
Tourist
5 0 0
rsdimitrov
Shopify Partner
94 8 28

@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.

 

 

 

I help family-run Shopify stores increase sales from existing traffic Learn More
Problem Solved? Accept the solution so you can help others.
Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com
Did my answer save you time? Buy me a coffee, please 🙂 paypal.me/rsdimitrov
ZenVibezStore
Tourist
5 0 0

@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
Shopify Partner
94 8 28

@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.

I help family-run Shopify stores increase sales from existing traffic Learn More
Problem Solved? Accept the solution so you can help others.
Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com
Did my answer save you time? Buy me a coffee, please 🙂 paypal.me/rsdimitrov
ZenVibezStore
Tourist
5 0 0

@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
Shopify Partner
94 8 28

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

 

I help family-run Shopify stores increase sales from existing traffic Learn More
Problem Solved? Accept the solution so you can help others.
Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com
Did my answer save you time? Buy me a coffee, please 🙂 paypal.me/rsdimitrov
jtan
Trailblazer
158 4 24

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

 

Untitled.png

rsdimitrov
Shopify Partner
94 8 28

@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.

I help family-run Shopify stores increase sales from existing traffic Learn More
Problem Solved? Accept the solution so you can help others.
Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com
Did my answer save you time? Buy me a coffee, please 🙂 paypal.me/rsdimitrov
Zag4242
Excursionist
41 0 5

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
New Member
2 0 0

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
Shopify Partner
94 8 28

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

I help family-run Shopify stores increase sales from existing traffic Learn More
Problem Solved? Accept the solution so you can help others.
Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com
Did my answer save you time? Buy me a coffee, please 🙂 paypal.me/rsdimitrov
beardpans
New Member
2 0 0

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
New Member
1 0 0

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