Overlay header logo size

[Katharina_be]

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

[Kinjaldavra]

hello @Katharina_be 

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

[diego_ezfy · 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

[Katharina_be]

@diego_ezfy Thanks!

[Katharina_be]

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]

To make it plain: the menu should move up

[AlexBrowe2]

@diego_ezfy @diego_ezfy @diego_ezfy 

Hello Ketan🙂

Please could you help me to make the logo appear on my page as it is in the image that I send you?

The problem is that if I increase the size of the logo, the size of the header also increases. Because the header keeps the logo inside, but we want them to be independent. In order to increase the size of the logo so that it protrudes a bit from the header.

What is the code and where do we have to modify to make the size of the logo and header independent?

Our page is: https://kongpods.com/

Thank you