“Always Sticky, Reduce Logo” - how to make logo even smaller

Store Design
1

I was wondering if anyone knows how I can make the logo size even smaller when using the sticky header with “Always Sticky, Reduce Logo” selected. It looks like it reduces the size by around 20% but I would like to try custom values and see how it looks even smaller.

2

Hi @Webnewb

Can you kindly share your store link (with the password, if any) with us?

3

To make the logo size even smaller when using the sticky header with the “Always Sticky, Reduce Logo” option selected, you can modify the CSS code in your theme. Here’s a step-by-step guide:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you’re using and click on “Actions.”
  3. Select “Edit code” from the dropdown menu.
  4. In the left-hand sidebar, navigate to the “Assets” folder and locate the file named “theme.scss.liquid” or “theme.css” (depending on your theme version).
  5. Click on the file to open it in the code editor.
  6. Scroll to the bottom of the file and add the following CSS code:
.site-header__logo-image {
  max-height: 50px; /* Adjust the value to your desired size */
}
​
  1. Customize the max-height value according to your preference. Decreasing the value will make the logo size smaller. You can experiment with different values until you achieve the desired result.