Hide logo but keep menu and icons in sticky header when scrolling?

Store Design
, , ,

Topic summary

A user working with Shopify’s Studio or Dawn theme wants to hide their brand logo in the sticky header when scrolling, while keeping the menu and icons visible. The large logo takes up too much screen space during scroll.

Initial Problem:

  • Logo remains visible in sticky header when scrolling
  • Previous code solutions caused menu titles to break
  • Issue initially only worked on homepage, not other pages

Solution Process:

  • Community members provided CSS code targeting the .header__heading element
  • Code uses transform: scale(0) and height: 0 to hide logo when .scrolled-past-header class is active
  • Initial implementation only worked on front page
  • Required adding code to a global template file (Assets/base.css) to apply across all pages

Final Resolution:
The user shared complete working CSS code that successfully hides the logo on scroll across all pages. The solution includes transitions for smooth animation, media queries for desktop responsiveness, and adjustments to prevent layout shifts when logo disappears.

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

For Studio or Dawn theme:

Hi there!

We are using the sticky header but our brand’s logo takes up too much space of the screen when scrolling. Is it possible to somehow hide the logo when the menu bar isn’t at the top of the page? To just keep the menu bar and the icons when scrolling?

Images:

1. What it looks like and what we want it to look like at the top of the page

2. What it looks like now when scrolling

3. What we want it to look like when scrolling

1.png
1.png3024×1558 404 KB

2. what we have now when scrolling
2. what we have now when scrolling3024×1558 286 KB

3. what we want it to look like when scrolling
3. what we want it to look like when scrolling3024×1558 310 KB

We tried using a code from this post, but unfortunately it didn’t quite work for us. The menu titles and icons moved slightly to the left instead of staying in place when scrolling and the mega menu didn’t work properly unless it was at the top of the page. (see video of our website when using that code)

Super super grateful for any help!

Thanks xx

2

It’s hard to tell, because the sticky menu doesn’t appear to be enabled right now, so I cannot give you an updated code for you to use. I saw what you mean in your video. Would it be possible for you to enable the sticky header so the Community can look at it and advise?

3

Hi,

Thank you so much for taking time out of your day to have a look at this!

The sticky header is enabled here, is there another way to enable it that I’m not aware of?

01.png
01.png3024×1558 443 KB

We’re in the middle of updating and changing the theme for our website so the new theme that we’re working on right now is not the same as what we currently have online. But here is a link to a preview of the new theme in case that helps: https://vks98zj89zpfra1k-18324013.shopifypreview.com

4

Aha! Now I can see the sticky header on the preview link. Thank you.

Here is the code you need to hide your Logo on scroll and still be able to use the navigation without breaking it.

I tested it and I can see it working, although it is just a test through the front-end so it is not super clean and smooth as when you implement it from your code. I made a video but would’t let me attach it here.

1 Like
5

Hi @HOPLIKEABUNNY ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Assets/base.css
  2. Add code below to end of file
body sticky-header .header__heading {
		transition:  all .5s;
		transform: scale(1);
		height: auto;
	}
	body .scrolled-past-header sticky-header .header__heading {
		transform: scale(0);
  		height: 0;

	}
1 Like
6

It works perfectly on our front page but is not working on any other page. Is there any way to fix this so that the logo disappears when scrolling on all pages and not just the front page? Thank you so so much!

7

Hi! Thank you so so much for taking a look at this!

It works perfectly on our front page but is not working on any other page. Is there any way to fix this so that the logo disappears when scrolling on all pages and not just the front page? Thank you so much!

8

Sure. You need to implement the code in a global template file, where it gets loaded in every single page of your store.

9

For anyone having the same problem that we did – this is the full code from EBOOST that we ended up using and that solved our problem:

body sticky-header .header__heading {
     transition:  all .1s;
     transform: scale(1);
     height: auto;
  }
  body .scrolled-past-header sticky-header .header__heading {
     transform: scale(0);
     height: 0;
  }

@media screen and (min-width: 990px) {
   body .scrolled-past-header sticky-header .header__inline-menu {
     margin-top: 0!important;
   }
  }

  body .scrolled-past-header sticky-header .header__heading {
     padding: 0;
  }

body sticky-header .header__heading-link {
     transition:  all .1s;
     transform: scale(1);
     height: auto;
  }
  body .scrolled-past-header sticky-header .header__heading-link {
     transform: scale(0);
     height: 0!important;
  }

  body .section-header.shopify-section-group-header-group {
     z-index: 5;
  }

@media screen and (min-width: 990px) {
   body .scrolled-past-header sticky-header .header__inline-menu {
     margin-top: 0!important;
   }
  }

  body .scrolled-past-header sticky-header .header__heading-link {
     padding: 0;
  }