CODEWITHSUNDEEP
sassshopifyliquidliquid-layout
Felipe Quintana
Felipe Quintana

Reputation: 7

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

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!!!

Upvotes: 0

Views: 69

Answers (3)

David Mc
David Mc

Reputation: 119

The following should work, unless I'm missing something:

header.site-header .site-nav__dropdown  a[href="/collections/china"]:hover {
  color:#f397cc;
}

header.site-header .site-nav__dropdown  a[href="/collections/india"]:hover {
  color:#17cc39;
}

The code you provided is on the right track but I feel the specificity is too high.

Upvotes: 0

Rahul
Rahul

Reputation: 2071

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.

Upvotes: 0

Vladimir
Vladimir

Reputation: 2559

You can use a handle filter to use link title as a part of a class for your nav links. For example:

<a href="{{ link.url }}" class="site-nav__dropdown-link nav-{{ link.title | handle }}">{{ link.title }}</a>

Then you can use classes .nav-china and .nav-india in your main SCSS file to customize for these items.

You can also check link object whether it is a collection and use collection.handle or even collection.id as a part of link classes. Depends on how much hard-coded it could be.

Upvotes: 0

Related Questions