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

Atharva
Visitor
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 23 (23)

rsdimitrov
Shopify Partner
94 8 29

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
Visitor
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 29

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 29

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

https://swagthedogshop.com/

thats the website

rsdimitrov
Shopify Partner
94 8 29

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

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

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 29

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

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
Visitor
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 29

@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
Visitor
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
Visitor
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 😞

karan90
Excursionist
13 0 4

@rsdimitrov wrote:

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

 


Hi, thank you for this. It works great.

I have one issue though, the padding isn't working on the homepage. It works on all other pages.

On the homepage, the rest of the page isn't moving down like it is supposed to and so some of the banner is being covered by the header. Any way to solve this?

diego_ezfy
Shopify Partner
2935 562 883

@karan90 and anyone else dealing with this issue:

If you're using Debut this is what works the best.

I developed this solution just a few weeks ago, currently having 150+ users with it.
All bugs reported were fixed, so it's very safe and highly customizable at the customize page. Some of the options available:

Sticky navbar on desktop ✔️
Sticky navbar on mobile ✔️
Sticky navbar on homepage only ✔️
Navbar font size (choose unique values for desktop/mobile) ✔️ 
Sticky announcement bar on desktop ✔️
Sticky announcement bar on mobile ✔️
Sticky announcement bar on homepage only ✔️
Announcement bar font size (choose unique values for desktop/mobile) ✔️
Add subtle shadow below navbar ✔️
Bug fix: when clicking on “search” page jumps to top ✔️
Bug fix: when opening the menu page jumps to top ✔️
Bug fix: Search input re-coded from scratch to work with both sticky navbar and the announcement bar ✔️

You can download the file and read the installation instructions clicking here.

If you have any questions just let me know.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Richard_F
Tourist
5 1 2

Hi

Thanks for this post, it's done pretty much everything I needed, EXCEPT my logo when the header is transparent is white, so when I then scroll and the white sticky header appears, my logo also disappears.

Is there a way to change the logo to black (on white) once the header locks solid?

Thanks in advance.

charliechen168
Tourist
5 0 1

Hi! Can you potentially also share how this could be done using the Dawn template? Thanks