Nav Menu links modified with logic. Each link a different color

Question

I hope someone can help me with this.

Im building a store in Shopify, so my question would be with liquid and SASS.

Im trying to change the text hover color on each of my nested nav menu children to a different color each, so when you hover over the category (lets say ) "Mexico" it changes to green, but if the category is "USA" changes to blue.

My client, a tea distributor, is really enfatic on color codes, as everything on his store is color coded, so he specifically asked for this (there are not a lot, and wont ever change, so it wont be an issue to hard code them). I know how to modify the CSS and have them all be one class and one color, but that wont cut it and I can´t seem to do it with logic.

The store is not yet public, but is https://tomas-te.myshopify.com/ password tomas

Ive unsuccesfully tried a couple of things:

An IF loop to call different classes depending on the collection handle, (but that wont work as the code is in the HEADER section and not in a collection template). Modifying each SCSS like this:

header.site-header nav.site-nav__link ul > li > a[href="/collections/china"]{ color:#f397cc }

And a couple of other ways without success. Im sure there has to be a way! And I do not mind if its hard coded or not, as long as each of em is a different color :)

Thanks!!!

Answer 1

Below is SCSS code for your navbar dropdown.

header{
    &.site-header{
        .site-nav{
            .inner-nav-containers{
                .site-nav__item{
                    &.site-nav--has-dropdown{
                        .site-nav__dropdown{
                            li{
                                a{
                                    transition: color 0.3s linear;
                                    &:hover{
                                        &[href="/collections/china"]{
                                            color: #f397cc;
                                        }
                                        &[href="/collections/india"]{
                                            color: green;
                                        }
                                        &[href="/collections/usa"]{
                                            color: red;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Put above code in your theme.scss.liquid file it will work.