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

Store Design

Topic summary

  • Goal: reduce the logo size further in a sticky header using the “Always Sticky, Reduce Logo” setting, beyond the default ~20% reduction.
  • Actionable suggestion: modify the theme’s CSS to control the logo’s height. Add a rule for .site-header__logo-image with a smaller max-height (e.g., 50px) and adjust to taste.
  • How-to steps: Shopify admin > Online Store > Themes > Edit code > Assets > open theme.scss.liquid or theme.css > append the CSS rule, then experiment with different max-height values.
  • Review request: a participant asked for the store link (and password, if any) to provide more specific assistance.
  • Technical notes: a “sticky header” keeps the header fixed at the top while scrolling; CSS “max-height” limits the image’s maximum rendered height.
  • Current status: no confirmation of outcomes yet. The shared code snippet is central to the proposed solution, and the thread appears open pending testing and potential store access.
Summarized with AI on January 27. AI used: gpt-5.
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.