What's your biggest current challenge? Have your say in Community Polls along the right column.

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
25 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
25 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
9133 2180 2688

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Aaron-Mihell
Excursionist
25 0 7

Hi,

 

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

 

Thanks!

Aaron-Mihell
Excursionist
25 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
9133 2180 2688

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Aaron-Mihell
Excursionist
25 0 7

Hi,

 

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

Aaron-Mihell
Excursionist
25 0 7

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