Change menu nav colour on some pages

[unadiamond]

Hi!

I'd like to change the menu nav colour on some pages to beige and others to green. I've tried this snipped in my theme.liquid file but no dice. My default menu nav colour in my theme editor is beige, but something is still making the ones I want to be beige, green. I've tried the code snippets below with no luck:

<style>
{% if template.name == 'page.about' or
template.name == 'page.privacy' or
template.name == 'page.returns-refunds' or
template.name == 'page.shipping' or
template.name == 'page.legal' or
template.name == 'page.faq' or
template.name == 'page.default' or
template.name == 'page.contact' %}
.navtext {
color: #004335 !important; /* Green color for specified pages */
}
{% else %}
.navtext {
color: #f5f5dc !important; /* Beige color for all other pages */
}
{% endif %}
</style>

AND:

<style>
{% if template.name == 'index' or
template.name == 'page.learning-about-lab-grown' or
template.name == 'page.all-about-diamonds' or
template.name == 'page.our-process' or
template.name == 'page.lookbook' or
template.name == 'page.how-to-find-your-ring-size' %}
.navtext {
color: #f5f5dc !important; /* Beige color for specified pages */
}
{% endif %}
</style>

My website is unadiamond.com

[Guleria]

Hello @unadiamond ,

Important is already used in the cs that's why your css is not working.

You need to use parent element with the class to override it.

like

.navlink .navtext{

  // You css will be here 
color: #f5f5dc !important;

}

Please give it a try and let me know.

If problem solved don't forget to Like it and Mark it as Solution!
And if you need help with customization/code part you can contact me for services

You can find the email in the signature below.

Thanks

[PageFly-Richard]

Hi @unadiamond 

This is Richard from PageFly - Shopify Page Builder App

If your current code is targeting the Template-Name and apply the CSS based on Condition, i suggest you can do another is handle of page. 

So for example your page is = /pages/learning-about-lab-grown' => so the code will be 

{% if handle contains 'learning-about-lab-grown' %}

This will target it by URL and you will have more easier way to control it

Hope this can help you solve the issue 

Best regards,

Richard | PageFly 

[namphan · Accepted solution]

Hi @unadiamond,

Please change code:

template.name

=>

template

For example:

<style>
{% if template == 'page.about' or
template == 'page.privacy' or
template == 'page.returns-refunds' or
template == 'page.shipping' or
template == 'page.legal' or
template == 'page.faq' or
template == 'page.default' or
template == 'page.contact' %}
.navtext {
color: #004335 !important; /* Green color for specified pages */
}
{% else %}
.navtext {
color: #f5f5dc !important; /* Beige color for all other pages */
}
{% endif %}
</style>

[unadiamond]

you're the best, thank you!!!

[namphan]

Hi @unadiamond,

You're welcome and happy to help

[unadiamond]

sorry quick follow up - how do i make the blog and product pages green too? i've followed the logic of your code and applied them to page.product + page.blog but they remain beige

[unadiamond]

sorry quick follow up - how do i make the blog and product pages green too? i've followed the logic of your code and applied them to page.product + page.blog but they remain beige

[namphan]

Hi @unadiamond,

Please add code:

<style>
{% if template == 'page.about' or
template == 'page.privacy' or
template == 'page.returns-refunds' or
template == 'page.shipping' or
template == 'page.legal' or
template == 'page.faq' or
template == 'page.default' or
template == 'page.contact' or
template == 'product' or
template == 'blog' %}
.navtext {
color: #004335 !important; /* Green color for specified pages */
}
{% else %}
.navtext {
color: #f5f5dc !important; /* Beige color for all other pages */
}
{% endif %}
</style>

[Dan-From-Ryviu]

Hi @unadiamond 

You can try to use code example like this below and check 

{% if template == 'index' or
       page.handle == 'about' or ... }%
<style>
</style>
{% else %}
<style>
</style>
{% endif %}