be-one Posted February 15, 2022 Posted February 15, 2022 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 SquareRefresh 1
SquareRefresh Posted February 15, 2022 Posted February 15, 2022 (edited) 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 February 15, 2022 by SquareRefresh meganheath 1 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.
meganheath Posted February 15, 2022 Posted February 15, 2022 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; } }
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment