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

[HOPLIKEABUNNY]

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

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

[Emma_at_Trepoly]

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?

[HOPLIKEABUNNY]

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?

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

[Emma_at_Trepoly]

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.

<style>
  .hidden {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
</style>

<script>
  window.addEventListener('scroll', function () {
    const headerLogo = document.querySelector('.header__heading');
    if (window.scrollY > 50) { // Adjust the '50' threshold as needed
      headerLogo.classList.add('hidden');
    } else {
      headerLogo.classList.remove('hidden');
    }
  });
</script>

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.

[HOPLIKEABUNNY]

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!

[Emma_at_Trepoly]

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

[EBOOST]

Hi @HOPLIKEABUNNY ,

May I suggest to update code these steps:

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

2. Assets/base.css
3. 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;

	}

[HOPLIKEABUNNY]

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!

[HOPLIKEABUNNY · Accepted solution]

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;
  }