Shopify themes, liquid, logos, and UX
Hello, I am looking to only change the color of the dropdown menu font on the home page, and not have it show anywhere else on my website. I added a custom code that changed my header fonts to white on the home page only, but it also changed the color of my dropdown menu font in the home page. Is there any way to make the dropdown menu font color the same as the dropdown menu font color for the rest of my store? My theme is Dawn version 13.0.0 and website is goldengreenobsession.com.
Here is the custom code I used in theme.liquid that changed my header font color and dropdown menu font color in the home page:
{%- if request.page_type == 'index' -%}
<style>
header * {
color:white !important
}
header {
font-size:12px !important
}
</style>
{%- endif -%}
This is how my home page dropdown currently looks:
This is how I want it to look, with the normal green text (but still keep the white header font in the home page):
Any advice on what I can do to get this result would be greatly appreciated. Thank you!
Solved! Go to the solution
This is an accepted solution.
Hey @artiisque,
Just replace the code with this
{%- if request.page_type == 'index' -%}
<style>
header-menu summary,
.list-menu > ul > li > .header__menu-item ,
.header__menu-item span,
.header__icons * {
color: white !important;
}
header {
font-size:12px !important
}
</style>
{%- endif -%}
This is an accepted solution.
Hey @artiisque,
You can replace the previous code with this
{%- if request.page_type == 'index' -%}
<style>
header-menu summary,
.list-menu > ul > li > .header__menu-item,
.header__menu-item span, .header__icons *,
summary.header__icon {
color: white !important;
}
header {
font-size:12px !important
}
</style>
{%- endif -%}
This is an accepted solution.
Hey @artiisque,
Just replace the code with this
{%- if request.page_type == 'index' -%}
<style>
header-menu summary,
.list-menu > ul > li > .header__menu-item ,
.header__menu-item span,
.header__icons * {
color: white !important;
}
header {
font-size:12px !important
}
</style>
{%- endif -%}
This worked like a charm, thank you so much!!
Hello again, I just noticed that the drawer on the mobile version is no longer white, so it’s hard to see. How do I change it back to white please without affecting the drawers? Thank you.
What it looks like now on mobile:
This is an accepted solution.
Hey @artiisque,
You can replace the previous code with this
{%- if request.page_type == 'index' -%}
<style>
header-menu summary,
.list-menu > ul > li > .header__menu-item,
.header__menu-item span, .header__icons *,
summary.header__icon {
color: white !important;
}
header {
font-size:12px !important
}
</style>
{%- endif -%}
This worked even better, thank you so much!
it worked perfectly!!!
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024