Dawn Theme - Collapse Logo on Sticky Header

Store Design

Topic summary

A user sought help collapsing the logo in Dawn Theme’s sticky header to save space while scrolling, leaving only the navigation visible.

Initial Responses:

  • Community members requested the store link to provide tailored solutions
  • One user pointed out Dawn Theme has a built-in option to reduce logo size on scroll (accessible via Online Store > Themes > Customize)

Resolution:
The original poster resolved the issue using custom code:

CSS modifications (base.css):

  • Added transitions to fade out logo when scrolling
  • Applied .header--scrolled class to hide logo and shrink header height to 50px
  • Adjusted navigation positioning for smooth collapse

JavaScript implementation (theme.liquid):

  • Detects scroll position (triggers at 25px)
  • Dynamically adds/removes .header--scrolled class
  • Adjusts header and navigation heights based on scroll state

The solution combines CSS transitions for visual effects with JavaScript for scroll detection, providing a custom alternative to Dawn’s built-in logo reduction feature.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have a new site that I am using the Dawn Theme. The Sticky header is enabled but the logo takes up a considerable amount of space. How would I go about collapsing the logo on scroll down to only show the Navigation element?

Thank you in advance.

Bryan

1 Like
2

Hi @EvolvedGame
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

3

Hi @EvolvedGame

It has the option to reduce logo when scrolling down in Online Store > Themes > Customize

Screenshot 2025-03-19 at 09.17.00.png
Screenshot 2025-03-19 at 09.17.00.png3656Ă—932 371 KB

4

Thank you everyone for reaching out. I was able to resolve this issue by using a combination of CSS and JavaScript.

5

These are the steps I used to collapse the logo:

:one: Add CSS (in base.css)

Go to Online Store → Themes → Edit Code → Open assets/base.css and add this at the bottom:

.header__heading-logo {
transition: opacity 0.3s ease-in-out;
}

.header–scrolled .header__heading-logo {
opacity: 0;
visibility: hidden;
}

/* Ensure the header collapses smoothly */
.header {
transition: all 0.3s ease-in-out;
}

/* Shrink header on scroll /
.header–scrolled {
height: 50px; / Adjust based on your design */
padding: 5px 0;
display: flex;
}

/* Adjust navigation size when scrolling */
.header__inline-menu {
transition: all 0.3s ease-in-out;
}

.header–scrolled .header__inline-menu {
margin-top: -10px;
}

:two: Add JavaScript (in theme.liquid before )

Open layout/theme.liquid, scroll to the bottom, and add this right before :