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

Store Design
1

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!

1 Like
2

@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;
}
1 Like
3

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!!

1 Like
4

@TechExplorer

Yes, please reduce header logo height then automatic reduce

1 Like
5

Hey!

is this also possible in the debut theme?

thanks!

1 Like
6

@flyelite

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

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

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

7

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-p/518018

  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');
  }
});