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

Highlighted
Shopify Partner
76 8 20

@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/braiv
1 Like
Highlighted
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.

0 Likes
Highlighted
Shopify Partner
76 8 20

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/braiv
1 Like
Highlighted
Excursionist
150 4 20

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

0 Likes
Highlighted
Shopify Partner
76 8 20

@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/braiv
0 Likes