Solid Header Colour On Every Page Asides From Home - Dawn Theme

Solid Header Colour On Every Page Asides From Home - Dawn Theme

Aaron-Mihell
Excursionist
23 0 7

Hi,

 

I am using the Dawn theme. I have coded the header to be transparent at the top of the page and then become solid when scrolling.

 

The only issue is I want the header to be a solid colour on every other page (aside from the home page) as currently, the transparent header causes the white text to blend in with the white background.

 

Also for some reason on other pages, when you scroll, the header has a white background therefore you still can't see the white text anyway.

 

If anyone could help me code the background of the header to be #5B584A on all of the other pages, it would be much appreciated.

 

I have attached an image below of how I want it to look on all the other pages.

 

Thanks,

Aaron

 

Screen Shot 2024-10-15 at 2.22.29 pm.png

 

Replies 7 (7)
Aaron-Mihell
Excursionist
23 0 7

Hi,

 

Thanks for your help, but ideally I want to adapt the code I already have installed to achieve a solid header on the other pages.

 

Thanks,

Aaron

Made4uo-Ribe
Shopify Partner
8858 2118 2602

Hi @Aaron-Mihell 

Can you provide the code you add to make it transparent? please, share the store URL. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
Aaron-Mihell
Excursionist
23 0 7

Hi,

 

Here is my store URL: https://5a3aa2-da.myshopify.com/

 

Thanks!

Aaron-Mihell
Excursionist
23 0 7

This is the code i used to make it transparent.

 

I added it to theme.liquid.

 

<style>
{%if template contains 'index'%}
.header-wrapper.gradient{
background:transparent !important;
}
.scrolled-past-header .header-wrapper.gradient{
background:#5B584A!important;
}
#MainContent{
margin-top:-120px!important;
}
{%endif%}
</style>

Made4uo-Ribe
Shopify Partner
8858 2118 2602

Try this one. 

<style>
{% if template.name == 'index' %}
.header-wrapper.gradient {
background:transparent !important;
}
.scrolled-past-header .header-wrapper.gradient {
background:#5B584A!important;
}
#MainContent {
margin-top:-120px!important;
}
{%endif%}
</style>

And Save. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
Aaron-Mihell
Excursionist
23 0 7

Hi,

 

Unfortunately, this didn't seem to make any change.

Aaron-Mihell
Excursionist
23 0 7

It is ok, I managed to resolve the issue. Thank you for your help though