Hi there,
Trying to change the ECO in my nav bar to appear Green (similar to the SALE header being red) currently used this code in the base.css file but it’s only doing the SALE link and not the eco link (not sure if its because its a drop down link?)
.list-menu a[href="/collections/sale"] {
color:#ff0000!important;
}
.list-menu a[href="/collections/ECO"] {
color:#6FCA32!important;
}
Can you share the store link and screenshot ?
screenshot is above and preview link https://xi2c77tf8ip94lhr-36045684869.shopifypreview.com
Thank you @nishanttbi for your response. That coding is almost there! the ECO tab is green but its also making other tabs green too.
I’m just after only ECO in green
Please see screenshot to see the outcome of that coding
Hi @joedogfish ,
Please follow the instructions below.
To make the ECO link green add the code below
#Details-HeaderMenu-9 > summary > span {
color: #6FCA32;
}
Since, it will be hard to read the text, I recommend making it bold. Add this code instead, if you agree.
#Details-HeaderMenu-9 > summary > span {
color: #6FCA32;
font-weight: 600
}
If you want the icon-caret or dropdown icon for the ECO to be green as well. Add the code below to the same file
#Details-HeaderMenu-9 > summary > svg {
color: #6FCA32 !important
}
ul.list-menu.list-menu--inline li:nth-child(2) span {
color: red;
}
#Details-HeaderMenu-9 span {
color: #6FCA32 !important;
}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid
Please add below css code in bottom of assets/base.css file
.header__inline-menu ul li:nth-child(9) span {
color: green !important;
}
.header__inline-menu ul li:nth-child(9) svg.icon.icon-caret {
color: green;
}
Thank you.
Thank you, its getting closer! I changed it to
.list-menu a[href="/collections/sale"] {
color:#ff0000!important;
}
#Details-HeaderMenu-9 span {
color: #6FCA32 !important;
}
however I’d like for my transparent header to be all white text when transparent then when you scroll down and the sticky header has its colour fill the SALE is red and the ECO is green. with the above code the SALE works but not the ECO.
Please see screenshots below
Thank you, its getting closer! I changed it to
.list-menu a[href="/collections/sale"] {
color:#ff0000!important;
}
#Details-HeaderMenu-9 span {
color: #6FCA32 !important;
}
however I’d like for my transparent header to be all white text when transparent (easier to read) then when you scroll down and the sticky header has its colour fill the SALE is red and the ECO is green. with the above code the SALE works but not the ECO.
Please see screenshots below
Transparent header needs to be all white text (currently eco remains green)
then when you scroll the corresponding colour text appears as shown above (which is good)
Hi @joedogfish ,
Try this instead. Please do not use “!important” if you are intending to change the code later.
.site-header-transparent #Details-HeaderMenu-9 > summary > span {
color: #ff0000;
}
#Details-HeaderMenu-9 > summary > span {
color: #6FCA32;
}
This works great but is there a way to make the ECO green for mobile too? Thank you so much!
@joedogfish Yes. Just add the code below.
@media only screen and (max-width: 950px) {
#Details-menu-drawer-menu-item-9 > summary {
color: #6FCA32
}
}
Thank you! Life saver!
Hi @made4Uo i just noticed then when I’m on any other page other than the home page then text for ECO goes white and you can’t see it! Any advice??? please see screenshot example below and preview link is https://tr6c9oj2rsd3uniw-36045684869.shopifypreview.com
@made4Uo is there an {% if } statement usable for this? so when the header is transparent its white then when its not transparent its green?
I fixed my issue with an if statement!
{
{% if .site-header-transparent #Details-HeaderMenu-9 > summary > span %}
color: white;
{% endif %}
}
thank you!