title: Nav Menu links modified with logic. Each link a different color
body: <p>I hope someone can help me with this.</p>
  
  <p>Im building a store in Shopify, so my question would be with liquid and SASS. </p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>The store is not yet public, but is <a href="https://tomas-te.myshopify.com/" rel="nofollow noreferrer">https://tomas-te.myshopify.com/</a> password   tomas</p>
  
  <p>Ive unsuccesfully tried a couple of things:</p>
  
  <p>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:</p>
  
  <p><code>header.site-header nav.site-nav__link ul &gt; li &gt; a[href="/collections/china"]{ color:#f397cc }</code></p>
  
  <p>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 :)</p>
  
  <p>Thanks!!!</p>