Jump to content

Shrink entire fixed header on scroll - Version 7.1

Go to solution Solved by tuanphan,

Recommended Posts

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!

Link to comment
  • Solution
On 7/5/2021 at 9:57 PM, amandahouston said:

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!

Hi. It looks like you fixed with this code?

.title-nav-wrapper .site-title img {
    transition: max-height 140ms ease-in-out
}

.title-nav-wrapper.shrink {
    padding-top: 20px !important;
    padding-bottom: 20px !important
}

.title-nav-wrapper.shrink .site-title img {
    max-height: 40px
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • 4 months later...
#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?

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.