Solved

How to make the header space shrink with sticky header in Brooklyn theme

TechExplorer
Explorer
61 1 20

Hello All,

I have set up my store with Sticky header. However, it consumes significant space while scrolling down. 

Can you advise how to make the header space automatically shrink while scrolling down?

Store: https://medendemo.myshopify.com/

Password: Welcome01!

Thanks in advance!

Accepted Solution (1)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@TechExplorer 

Thanks for it 

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.

.site-header__logo img {
transition: all 0.9s;
}
.header-sticky .site-header__logo img {
    max-width: 100px;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 6 (6)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@TechExplorer 

Thanks for it 

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.

.site-header__logo img {
transition: all 0.9s;
}
.header-sticky .site-header__logo img {
    max-width: 100px;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
TechExplorer
Explorer
61 1 20

Hi @KetanKumar ,

Thanks! it works perfectly!! 

Is it still possible to reduce the header size? adjusting the height is still possible??

I feel it will be much nicer if the height is reduced a bit! can you advise on that?

Thank you in advance!!

 

 

KetanKumar
Shopify Partner
36839 3635 11972

@TechExplorer 

Yes, please reduce header logo height then automatic reduce

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
flyelite
Tourist
4 0 1

Hey!

is this also possible in the debut theme?

thanks!

KetanKumar
Shopify Partner
36839 3635 11972

@flyelite 


Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Nikitass
Excursionist
16 0 6

Hi This code didn't seem to shrink the header on my brooklyn theme.

 

I have used the below code for sticky header as it suited the store.

https://community.shopify.com/c/Shopify-Design/Sticky-Fixed-Header-and-Navigation-for-Debut-Theme/td...

 

  1. In the folder, open your theme.scss.liquid file.

  2. Go to the very bottom of this file and paste the following code:

    #SearchDrawer {
      z-index:1001;
    }
    
    .site-header {
      position: fixed;
      z-index:1000;
      left:0;
      right:0;
      -webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
      -moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
      -ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
      -o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
      box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
    }
    
    #PageContainer {
      padding-top: 80px;
    }
    
    @media screen and (max-width: 749px) {
    #PageContainer {
      padding-top: 70px;
    }
    }
  3. In the same Assets folder, click to open your theme.js file.
  4. Go to the very bottom of this file and paste the following code:

    function headerSize() {
      var $headerHeight = $('div#shopify-section-header').outerHeight();
      $('#PageContainer').css('padding-top', $headerHeight);
    }
    
    $(window).on("load", headerSize);
    $(window).on("resize", $.debounce(500, headerSize));
    
    $(window).scroll(function() {
      scroll = $(window).scrollTop();
      if (scroll >= 1) {
        $('.site-header').css('top', '0');
      } else {
        $('.site-header').css('top', 'initial');
      }
    });