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

vivame
Tourist
37 0 5

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

0 Likes

@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

 

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
0 Likes
vivame
Tourist
37 0 5

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

0 Likes

@vivame , These screenshots are from Turbo Theme.

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
0 Likes

@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.

 

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
0 Likes
vivame
Tourist
37 0 5

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

0 Likes

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

E-mail: shopify.zeian@gmail.com

 

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
0 Likes

@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!

 

 

 

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
0 Likes
vivame
Tourist
37 0 5

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

0 Likes
vivame
Tourist
37 0 5

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/

0 Likes