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

Technical Q&A
1

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 :slightly_smiling_face:

2

@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
Showcaseali _ Cu (4).png252×534 18.9 KB

3

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

4

@vivame , These screenshots are from Turbo Theme.

5

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

6

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
Screen Shot 2021-04-23 at 21.12.33.png298×692 25 KB

7

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

E-mail: shopify.zeian@gmail.com

8

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

9

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

10

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/