Jump to content

Shrink nav bar on scroll 7.1

Recommended Posts


Im trying to create a shrink nav bar so it starts with a big logo and when the users scrolls it becomes smaller (example https://proto-objects.com/) 


I try using this code: 

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


Also i tried this one: 

.header.shrink img {
    max-width: 120px;
    transition: all 0.2s ease-in-out

.header img {
    transition: all 0.2s ease-in-out

Does anyone knows how i can adjust this? Thank you!!

Link to comment
  • Replies 4
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 year later...
20 hours ago, Jonesluke25 said:

@tuanphan is there an easy way to make a specific block or text get smaller with scroll. I want an image to start larger and get smaller when people scroll down a section. Thanks,


Not an easy way, you will need to use Script code, a bit complex

If you share link to page where you use text or image, we can test some code

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

Hi Tuanphan,

Website: polygon-rhombus-lyxx.squarespace.com

Password: August

Thanks so much, I really appreciate the help. I would like all the black illustrations on the homepage to start bigger and get smaller if possible.

Also, In addition to this is there some code to make the section title of each section go to the centre of the navigation bar where people would traditionally have their logo... I want people to know what section they are on because I intend to have lots of content/sections on the homepage (Section titlesReimagined, ReDiscover, Experience)



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.