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
2725 511 690

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

View solution in original post

Replies 6 (6)
Kinjaldavra
Shopify Partner
2302 569 1405

hello @Katharina_be 

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

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
diego_ezfy
Shopify Partner
2725 511 690

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

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

AlexBrowe2
New Member
18 0 0

@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

 

IMG-2584.jpg