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 
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
- Go to Online Store → Theme → Edit code.
- Open your theme.liquid file
- 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!
(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
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
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?