title: Changing text color of active menu item with CSS
body: <p>I need your help with changing the text color of the active menu item on my website, using CSS. </p>
  
  <p>(It's a Joomla website and I'm modifying the standard Gantry framework template to our needs). </p>
  
  <p>Here is the CSS for the active menu item...</p>
  
  <pre><code>.gf-menu.l1 &gt; li.active {
        background: none;
        color: #19D57E;
        border: none;
        border-bottom: 3px solid #19D57E;
        border-radius: 0px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        margin: 0 auto;
        padding-top: 1px;
      }
  </code></pre>
  
  <p>And here is the CSS for the passive menu items...</p>
  
  <pre><code> .gf-menu .item {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        line-height: 21px;
        color: #555555;
        padding: 4px 8px;
        text-align: left;
        text-shadow: 0px 0px 0 transparent;
        text-decoration: none;
        display: block;
        outline: 0;
        cursor: pointer;
        font-weight: bold;
      }
  </code></pre>
  
  <p>What I want is for the color of the text in active menu item to be green (#19D57E). </p>
  
  <p>The active menu item is already displaying a green line at the bottom, but the text color of the menu item remains black like in the passive menu items. As you can see, I have specified the text of the color, but for some reason it is not doing it. </p>
  
  <p>What am I doing wrong?</p>
  
  <p>If you want to have a look at the website, please go to <a href="http://www.barrylong.tv/index.php/home" rel="nofollow">http://www.barrylong.tv/index.php/home</a></p>
  
  <p>Thanks a lot!</p>
  
  <p>Hector</p>