How can I hide or reduce the logo size on my sticky header?

Store Design

Topic summary

A user wants to hide or reduce their logo size in the sticky header while scrolling, as it currently takes up too much space and blocks product visibility on collection pages.

Proposed Solutions:

Two support responses provided CSS code snippets to address the issue:

  • Option 1: Add code to assets/modules/theme-site-header.css targeting the site header logo with display properties
  • Option 2: Add code to assets/base.css to hide the header when not sticky and adjust navigation menu positioning with z-index and sticky properties

Both solutions involve editing theme CSS files through the Shopify admin (Online Store → Themes → Edit code). The user should save changes after implementation.

Status: The discussion remains open with no confirmation of which solution was implemented or whether the issue was resolved.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
3

Hello @shellbell ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file → add this following code at the bottom of page

.announcement-bar.sticky,
.navigation-menu.sticky {
  position: sticky;
  top: 0;
  z-index: 100;
}

.header:not(.sticky) {
  display: none;
}

Save changes

Hope this can help. Let us know if you need any further support.

Ali Reviews team.