Sticky header on roll back - craft theme - issue

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 :slightly_smiling_face:

Hello @globalbohemian ,

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

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
{%- if template.name == 'index' -%}

{%- endif -%}

In theme.liquid, paste the below code before

{%- if template.name == 'index' -%}

{%- 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! :rocket: (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!

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

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

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

I feel like this was the code I installed yesterday:

.header {
position: absolute !important;
width: 100% !important;
max-width: 100% !important;
}

{% 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;

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!

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.

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

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.

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?

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

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

}
{% endschema %}

.header__icon { color:#ffffff; }

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

here you go: 8543

1 Like

Request sent!

should be in now

1 Like

Hi, its done. Please check now

Hi Dan

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