Sticky header on roll back - craft theme - issue

[globalbohemian]

Hi

I have craft theme and I wanted a transparent header - I followed a tutorial and managed to get the header to be transparent but my issue is now it doesnt scroll back to a colour at all - it means you cant see the logo or nav on all other pages. I have got round this by inserting an image on my main pages. But I dont want to do that for every page like product pages. I don't know what code to add or where to make this a rule....

My site is: 

https://theglobalbohemian.com/

what I am trying to achieve is this 

https://www.thehippieshake.co.uk/

where when you scroll down it moves to white nav but with a black logo! Any help would be appreciated 🙂 

[topnewyork]

Hello @globalbohemian ,

You can easily do this , If you're using a free Shopify theme, just follow this tutorial – it's simple and effective.

[globalbohemian]

This isn't working either - I also dont have that header colour control on my block either! 

[websensepro]

Hi @globalbohemian 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

{%- if template.name == 'index' -%}
<style>
  .template-index .shopify-section-header + .shopify-section {
    margin-top: -100px; 
  }
  
  .homepage-header {
    position: absolute; 
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
  }

  .homepage-header .header-wrapper {
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
  }

 
  .homepage-header .header__icon,
  .homepage-header .header__icon--summary span,
  .homepage-header .header__icon--account,
  .homepage-header .desktop-localization-wrapper .disclosure__button,
  .homepage-header .swym-header-launcher-icon svg path,
  .homepage-header a.header__icon--cart {
    color: white !important;
    fill: white !important;
    stroke: white !important;
    transition: color 0.4s ease, fill 0.4s ease, stroke 0.4s ease;
  }
  

  .homepage-header .header__heading-logo {
    filter: invert(0); /* Default: No inversion */
    transition: filter 0.4s ease;
  }




  .homepage-header.scrolled-active .header-wrapper {
    background-color: white !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
  }
  
 
  .homepage-header.scrolled-active .header__icon,
  .homepage-header.scrolled-active .header__icon--summary span,
  .homepage-header.scrolled-active .header__icon--account,
  .homepage-header.scrolled-active .desktop-localization-wrapper .disclosure__button,
  .homepage-header.scrolled-active .swym-header-launcher-icon svg path,
  .homepage-header.scrolled-active a.header__icon--cart {
    color: black !important;
    fill: black !important;
    stroke: black !important;
  }
  
  
  .homepage-header.scrolled-active .header__heading-logo {
    filter: invert(1); 
  }

</style>
{%- endif -%}

In theme.liquid, paste the below code before </body>

{%- if template.name == 'index' -%}
<script>
document.addEventListener('DOMContentLoaded', function() {
  
  const stickyHeader = document.querySelector('.homepage-header');
  if (!stickyHeader) return;
  
  function handleScroll() {
    if (window.scrollY > 50) { 
      stickyHeader.classList.add('scrolled-active');
    } else {
      stickyHeader.classList.remove('scrolled-active');
    }
  }

  window.addEventListener('scroll', handleScroll);
  
  handleScroll(); 
});
</script>
{%- endif -%}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[globalbohemian]

That's not working for me 😞 I'm not sure I already have a code in somewhere as I did put code in for the transparent header yesterday 

[websensepro]

Remove the code you applied earlier and this code works only on home page .

[globalbohemian]

I feel like this was the code I installed yesterday: 

.header {
position: absolute !important;
width: 100% !important;
max-width: 100% !important;
}
</style>
<style>
{% unless template.name == 'index' %}
.header__menu-item,.header__icon{color:black !important}
{% endunless %}
.scrolled-past-header * {
color: black;
}
.scrolled-past-header .header-wrapper {
background: white !important;

[globalbohemian]

Took the previous code out and it popped it back to a black header - I have re put this code in that you put above but still no joy! 

[Dan-From-Ryviu]

Hi @globalbohemian 

Please go to your store admin > Sales channels > Online Store > Themes > Customize > Header > Sticky header, select Always then I can provide code to do your request. 

[globalbohemian]

Hi Dan - it's back to always on the header now 

[Dan-From-Ryviu]

Did you edit header.liquid file? Because I cannot see that your header is sticky for now. 

If you don't mind, please share the collab request code so I can request access to your theme and help you. 

[globalbohemian]

I may have done - it rings a bell! I'm no code expert so was watching videos and hoping I could manage it - how would I rectify? 

[Dan-From-Ryviu]

Please revert to the original code of your header.liquid file by click on Recent changes of the file

[globalbohemian]

I think I added this to get the hamburger to stay white 

}
{% endschema %}
<style>
.header__icon {
color:#ffffff;
}
</style>

[Dan-From-Ryviu]

If you dont mind, please share your collab request code so I can help

[globalbohemian]

here you go: 8543

[Dan-From-Ryviu]

Request sent!

[globalbohemian]

should be in now

[Dan-From-Ryviu]

Hi, its done. Please check now

[globalbohemian]

Hi Dan

It works - thank you! In order to make the header a bit smaller is it a case of resizing my logo down? 

[Dan-From-Ryviu]

Let me add code to resize your logo. 

[globalbohemian]

Ok 👌

[Dan-From-Ryviu]

Would you check if its ok now? 

[Dan-From-Ryviu]

You can resize your logo from store admin > Sales channels > Online Store > Themes > Customize > Theme settings > Logo.

After you are done, please let me know so I can change the code to fit with logo

[globalbohemian]

Ok. I will do when I get back. I had to go to appointment. Give me 1 hour

[Dan-From-Ryviu]

Take your time. Also, I have already resized your logo to 150px. 

[globalbohemian]

I took it down to 100px as looks better on DT and mobile - its now saved 🙂 

[Dan-From-Ryviu]

I updated the code.

[globalbohemian]

Thanks so much for your help! 🙂

[Dan-From-Ryviu]

Very welcome!