Shopify themes, liquid, logos, and UX
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
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
Can you provide the code you add to make it transparent? please, share the store URL. Thanks!
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>
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.
Hi,
Unfortunately, this didn't seem to make any change.
It is ok, I managed to resolve the issue. Thank you for your help though
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024