Shrink entire fixed header on scroll - Version 7.1

Site URL: https://sheep-badger-7tzn.squarespace.com/

Hi all! 

I've seen a variety of questions on this topic but was unable to find one that was specific to my issue. I like having a fixed navigation header at the top of the site, but it is so large that when I scroll down it blocks a lot of my images. Is there a code that I can use to shrink the entire header as I scroll down so that it becomes much thinner? Thanks in advance!

i have tried that code on my site 

https://mauve-calliope-enxy.squarespace.com/

\PW: Adameus1 

but it is not working (I assume it is CSS).  Any suggestions?

On 12/22/2022 at 12:23 AM, adameus said:

i have tried that code on my site 

https://mauve-calliope-enxy.squarespace.com/

\PW: Adameus1 

but it is not working (I assume it is CSS).  Any suggestions?

Use this code for your site

header#header img {
    transition: all 0.3s;
}
header#header.shrink img {
    max-height: 100px;
    transition: all 0.3s;
}

this looks pretty darn good.    I wouldnt mind if the menu items moved up a little when it shrinks so it stays centered, but I think it looks good.  I will run it by my client and THANKS you are amazing.

#header .header-title-logo img {
  transition: max-height 140ms ease-in-out
}
#header.shrink {
  .header-announcement-bar-wrapper{
    padding-top: 20px!important;
    padding-bottom: 20px!important;
  }
  .header-title-logo img {
    max-height: 40px;
  }
}

I have this to shrink the logo, however, it seems like on mobile it makes the logo larger rather than smaller, any ideas on how to make it shrink both on mobile and desktop?

I also would really like it if I could shrink the button in my header with the logo, is there any code to do so?

On 5/11/2023 at 5:30 AM, gibgib said:

#header .header-title-logo img {
  transition: max-height 140ms ease-in-out
}
#header.shrink {
  .header-announcement-bar-wrapper{
    padding-top: 20px!important;
    padding-bottom: 20px!important;
  }
  .header-title-logo img {
    max-height: 40px;
  }
}

 

I have this to shrink the logo, however, it seems like on mobile it makes the logo larger rather than smaller, any ideas on how to make it shrink both on mobile and desktop?

I also would really like it if I could shrink the button in my header with the logo, is there any code to do so?

What is site url? We can check problem easier

Hi! it is https://www.bouldersgym.com/

On 5/12/2023 at 2:49 AM, tuanphan said:

What is site url? We can check problem easier

On 5/16/2023 at 1:44 AM, gibgib said:

Hi! it is https://www.bouldersgym.com/

 

Add this to Design > Custom CSS

#header.shrink .header-display-mobile .header-title-logo img {
    max-height: 20px !important;
}

@tuanphan that worked, thank you so much!!