skip to Main Content

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

3

Answers


  1. 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.

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
  3. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search