CSS shrink logo on scroll up

Solved
Jcox1981
Excursionist
28 0 6

Hi Guys

 

I have a sticky header, and I was wondering if there is CSS to make the logo shrink when scrolling down the page?

 

Example here: https://heinztohome.co.uk/

 

This is my website: https://www.thehomebeautyedit.com/

Password: Gorilla01!

 

Thanks for any help you can provide!

0 Likes
IttantaTech
Shopify Partner
396 39 68

This is an accepted solution.

@Jcox1981 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.branding img, .branding-spacer img {
transition: .4s height ease;
    height: 140px;
}
.header-layout-minimal img {
    height: 80px;
}
@media (max-width: 720px) {
.branding img, .branding-spacer img {  
 height: 90px;
}
.header-layout-minimal img {
    height: 70px;
}
}

change the logo size as you like

Thanks,
Ittanta Technologies Pvt. Ltd. | Shopify Expert
If reply is helpful, please Like and Accept Solution.
To hire us, contact us at info@ittanta.com

Hello @Jcox1981,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste below code at the bottom of the file

.header-layout-minimal img.header-logo-desktop {
    max-width: 100px!important;
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
dmwwebartisan
Shopify Partner
5705 1306 1673

Hi


add code assets/theme.scss.liquid bottom of the file

 

.header-layout-inline .header-logo-desktop, img {display: block;height: auto;}
.header-layout-minimal .header-logo-desktop, img {display: block; height: 83px;} @media (max-width: 720px){ .header-layout-inline .header-logo-mobile, img {display: block; height: auto;} .header-layout-minimal .header-logo-mobile, img {display: block; height: 75px;} }

Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
Jcox1981
Excursionist
28 0 6

Perfect!! Thank you so much

0 Likes
vivame
Tourist
31 0 5

Hi I know this is an old thread, does anyone know a code that will work for turbo theme? I am trying to do the same thing

0 Likes