How can I resize my logo on mobile and control its scrolling size?

[MichKev22]

Logo looks too small on the mobile version with respect to the desktop version. How can I make it bigger.

Then, is it possible to regulate the degree to which logo get smaller when scrolling down?

[BSS-Commerce]

Hi @MichKev22 

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[MichKev22]

8a86ec.myshopify.com
Password: dahcko

[BSS-Commerce]

Hi @MichKev22 

Is this the result you want?

- Logo header on mobile is bigger than before. When scrolling down, it will be smaller again.

To be able to save the code snippets and have them actually work on your website, please follow these steps:

- Step 1: Go to Online store => Themes => Edit code

- Step 2: Find the file "bass.css" scroll to the bottom and paste the code that we fixed for you below.

/* START BSS FIX */
@media screen and (max-width: 989px) {
    .header__heading-link.link.link--text.focus-inset {
        display: flex;
        justify-content: center;
    }

    .header__heading-logo {
        width: 2000%;
    }
}

/* END BSS FIX */

- Step 3: Save your file and check the result.

We hope that it will work for you.

[MichKev22]

The solution you gave me works but the measurement had to be adjusted.

I'd like to know how to shrink less the logo when scrolling down. I would like it to be roughly 60% of what it normally is.

[BSS-Commerce]

Hi @MichKev22 

When you move your mouse down, you will see class ".scrolled-past-header .header__heading-logo" with width 75% to shrink the logo header. So you can customize this % to resize when scrolling. Also, you can create CSS to override this class.

[MichKev22]

Could you please be more detailed? I didn't manage to let it work.