How to make logo display smaller in the sticky header when scrolling down?

vivame
Explorer
74 0 8

Hi, my logo is round and I have it displaying at a large size in the header, but this means when scrolling down the page, the sticky header is very big and takes up too much space because the logo stays the same size. It also makes the logo too prominent on the page when browsing. Any idea how I can make the logo display smaller in the sticky header when scrolling down but keep it at a large size in the header? Failing that is there a way of leaving the logo out of the sticky header alltogether?

Here is an example of what I am trying to achieve: https://getmicroglow.com/

I am using turbo theme from out of the sandbox (same as the theme in the example site)

Any advice appreciated 🙂

Replies 9 (9)

Muhammad_Ali_S
Shopify Partner
664 121 183

@vivame,

You need to adjust these settings. If it didn't fixed your issues, Please share your website URL so we can assist you better.

If it works for you leave a LIKE to let me know.

Thank you!

Showcaseali _ Cu (4).png

 

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142
vivame
Explorer
74 0 8

Hi, the turbo theme does not have options to adjust padding in the header or the sticky header

Muhammad_Ali_S
Shopify Partner
664 121 183

@vivame , These screenshots are from Turbo Theme.

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142
vivame
Explorer
74 0 8

I know, I am hoping there is a code I can inject to reduce the logo size in the sticky header when you scroll down, because there are no options to do that in the customise theme section

Screen Shot 2021-04-23 at 21.12.33.png

Muhammad_Ali_S
Shopify Partner
664 121 183

Share you website URL or add me as staff so I can check.

E-mail: shopify.zeian@gmail.com

 

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142
Muhammad_Ali_S
Shopify Partner
664 121 183

@vivame,

You can try adding some CSS to the bottom of the styles.scss.liquid file (Online store > Themes > Actions > Edit code > Assets > styles.scss.liquid) 

Please leave a LIKE if it works for You. If need any assiatance add me as a staff.

Thank You!

 

 

 

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142
vivame
Explorer
74 0 8

Hi, that code didn't work, the logo is not smaller in the sticky header when you scroll down

vivame
Explorer
74 0 8

As you can see in this site the logo goes to about half the size in the sticky header when you scroll down the page: https://getmicroglow.com/

Muhammad_Ali_S
Shopify Partner
664 121 183

@vivame, for more check this official documentation. https://help.outofthesandbox.com/hc/en-us/articles/360012727234-Turbo-Guide-Header

You can add padding using simple CSS.

 

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142