CODEWITHSUNDEEP
cssjoomla
Hectoritobh
Hectoritobh

Reputation: 33

Changing text color of active menu item with CSS

I need your help with changing the text color of the active menu item on my website, using CSS.

(It's a Joomla website and I'm modifying the standard Gantry framework template to our needs).

Here is the CSS for the active menu item...

.gf-menu.l1 > 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;
    }

And here is the CSS for the passive menu items...

 .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;
    }

What I want is for the color of the text in active menu item to be green (#19D57E).

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.

What am I doing wrong?

If you want to have a look at the website, please go to http://www.barrylong.tv/index.php/home

Thanks a lot!

Hector

Upvotes: 2

Views: 14294

Answers (4)

OBV
OBV

Reputation: 1259

Find the CSS block: for item101 active last

Notice in your source for "home":

<li class="item101 active last">

<a class="item" href="/index.php/home">Home </a> </li>

You will see the text color property to change. The reason what you are doing isn't working is that you are changing the wrong CSS block properties.

Upvotes: 0

Felix G.
Felix G.

Reputation: 6691

I think you have to change the color of the .item element in the .active li-element. At the moment you are trying to change the color of the li-element and not of the link.

.gf-menu.l1 > li.active .item {
    /* ... */
    color: #19D57E;
    /* ... */
}

Upvotes: 0

Moe Assaad
Moe Assaad

Reputation: 337

add this in your style sheet .gf-menu > .active > a { color: #19D57E; }.

Upvotes: 0

Lodder
Lodder

Reputation: 19733

This is the CSS needed:

.gf-menu.l1 > li.active a {
      color: #19D57E;
}

Note the a after .active

Hope this helps

Upvotes: 3

Related Questions