Overlay header logo size

Solved
Katharina_be
Tourist
26 0 3

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

0 Likes
Natztech
Shopify Partner
2083 528 1275

hello @Katharina_be 

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

 

0 Likes

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 section not looking good or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com
0 Likes
Katharina_be
Tourist
26 0 3

@diego_ezfy Thanks!

0 Likes
Katharina_be
Tourist
26 0 3

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

0 Likes
Katharina_be
Tourist
26 0 3

To make it plain: the menu should move up

0 Likes