Overlay header logo size

Solved
Katharina_be
Excursionist
44 0 7

Hi Community,

i want to change the size of the logo in the header when i scroll down and it changes to overlay.

So when you open the homepage the logo size is 370px and that’s good as it is. But when you scroll down it is too big. So i would like it to change to 100px as soon as it is not transparent anymore.

My theme is flow

my url is https://www.betanics.de

and password is Modesto

I have basic knowledge in coding.

Thanks in advance

Kathie

Accepted Solution (1)

Accepted Solutions
diego_ezfy
Shopify Partner
2299 413 539

This is an accepted solution.

@Katharina_be,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
    .sticked .site-header__logo-image img{
    max-height: unset !important;
    max-width: 200px !important;
    width: 100% !important;
    transition: all .32s !important;
}

@media (max-width: 749px){
    .sticked .site-header__logo-image img{
    max-width: 100px !important;
}
    
}
</style>


You can change the logo's width as per your wish:

200px = width on desktop
100px = width on mobile

Please let me know whether it works.

Kind regards,
Diego

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

Replies 5 (5)
Natztech
Shopify Partner
2236 565 1373

hello @Katharina_be 

do you want to look like this see screenshot https://nimb.ws/OS4ZzL

 

diego_ezfy
Shopify Partner
2299 413 539

This is an accepted solution.

@Katharina_be,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
    .sticked .site-header__logo-image img{
    max-height: unset !important;
    max-width: 200px !important;
    width: 100% !important;
    transition: all .32s !important;
}

@media (max-width: 749px){
    .sticked .site-header__logo-image img{
    max-width: 100px !important;
}
    
}
</style>


You can change the logo's width as per your wish:

200px = width on desktop
100px = width on mobile

Please let me know whether it works.

Kind regards,
Diego

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

Katharina_be
Excursionist
44 0 7

@diego_ezfy Thanks!

Katharina_be
Excursionist
44 0 7

Hi @diego_ezfy 

is it also possible to make the whole header smaller? Now only the logo gets small but the header stays the same size.

I want the header to be smaller so customers can see more at the website at the same time.

Best

Kathie

Katharina_be
Excursionist
44 0 7

To make it plain: the menu should move up