Jump to content

HEADER SCALING only on landing page

Recommended Posts

Site URL: https://bastihansen.com

Hey Friends,

I achieved a scaling header via:

//Shrink Your Logo
#header .header-title-logo img {
  transition: max-height 800ms ease-in-out
}
#header.shrink {
  .header-announcement-bar-wrapper{
    padding-top: 20px!important;
    padding-bottom: 20px!important;
  }
  .header-title-logo img {
    max-height: 80px;
  }
}

Is it possible to have this animation ONLY on the /home page?
In every other page i would like to have it small all the time.

Any way to target this?

Thanks,

 

Basti

Screen Shot 2022-02-15 at 4.51.47 PM.jpg

Screen Shot 2022-02-15 at 4.51.56 PM.jpg

Link to comment

Hey @be-one try to add .homepage class before #header:

//Shrink Your Logo
.homepage #header .header-title-logo img {
  transition: max-height 800ms ease-in-out
}
.homepage #header.shrink {
  .header-announcement-bar-wrapper{
    padding-top: 20px!important;
    padding-bottom: 20px!important;
  }
  .header-title-logo img {
    max-height: 80px;
  }
}

 

Edited by SquareRefresh

SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

Link to comment

Hi @be-one

You can target a specific page by adding the ID for that page to your CSS. 

To find the page ID, use Chrome Inspector to Inspect Page Source. Right under the opening <body> tag you'll find the ID. 

Here is the code with the page ID for your site's homepage.

//Shrink Your Logo
#collection-61e8bd44a1be2338b87396f1 #header .header-title-logo img {
  transition: max-height 800ms ease-in-out
}
#collection-61e8bd44a1be2338b87396f1 #header.shrink {
  .header-announcement-bar-wrapper{
    padding-top: 20px!important;
    padding-bottom: 20px!important;
  }
  .header-title-logo img {
    max-height: 80px;
  }
}

 

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.