How Do I give the active menu items a different color - HTML5 CSS

Question

I am trying to add a different color to my active menu items.

I have tried a few different ways but, there must be something I'm missing.

Here is my code:

#menu ul {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #3d4449;
  font-family: "Roboto Slab", serif;
  font-family: 400;
  letter-spacing: 0.075em;
  list-style: none;
  margin-bottom: 0;
  padding: 0;
  text-transform: uppercase;
}
#menu ul a,
#menu ul span {
  border-bottom: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font-size: 0.9em;
  padding: 0.625em 0;
}
#menu ul a:hover,
#menu ul span:hover {
  color: #efa341;
}
#menu ul a.opener,
#menu ul span.opener {
  -moz-transition: color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  position: relative;
}
#menu ul a.opener:before,
#menu ul span.opener:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
}
#menu ul a.opener:before,
#menu ul span.opener:before {
  -moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
  color: #9fa3a6;
  content: '\f078';
  position: absolute;
  right: 0;
}
#menu ul a.opener:hover:before,
#menu ul span.opener:hover:before {
  color: #eda547;
}
#menu ul a.opener.active + ul,
#menu ul span.opener.active + ul {
  display: block;
}
#menu ul a.opener.active:before,
#menu ul span.opener.active:before {
  -moz-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
#menu > ul > li {
  border-top: solid 1px rgba(210, 215, 217, 0.75);
  margin: 0.5em 0 0 0;
  padding: 0.5em 0 0 0;
}
#menu > ul > li > ul {
  color: #9fa3a6;
  display: none;
  margin: 0.5em 0 1.5em 0;
  padding-left: 1em;
}
#menu > ul > li > ul a,
#menu > ul > li > ul span {
  font-size: 0.8em;
}
#menu > ul > li > ul > li {
  margin: 0.125em 0 0 0;
  padding: 0.125em 0 0 0;
}
#menu > ul > li:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

<nav id="menu">
  <header class="major">
    <h2>Menu</h2>
  </header>
  <ul>
    <li><a href="index.html">Home</a>
    </li>
    <li>
      <span class="opener">Services</span>
      <ul>
        <li><a href="webdevelopment.html">Web Development</a>
        </li>
        <li><a href="customisedsoftwaredevelopment.html">Customised Software Development</a>
        </li>
        <li><a href="ecommercesolutions.html">E-commerce Solutions</a>
        </li>
        <li><a href="softwaremaintenance.html">Software Maintenace</a>
        </li>

      </ul>
    </li>

    <li>
      <span class="opener">Products</span>
      <ul>
        <li><a href="ikat.html">Practice Management Application</a>
        </li>
        <li><a href="Itrack.html">Electronic Claims</a>
        </li>
        <li><a href="iportals.html">Electronic Invoicing</a>
        </li>
        <li><a href="dalymorgan.html">Debt Recovery</a>
        </li>
        <li><a href="ibridge.html">Automated account collection</a>
        </li>
        <li><a href="lms.html">Learner Management System</a>
        </li>
      </ul>
    </li>


    <li><a href="projects.html">Projects</a>
    </li>
    <li><a href="aboutus.html">About Us</a>
    </li>
    <li><a href="contactus.html">Contact Us</a>
    </li>


  </ul>
</nav>

What exactly is not working? You mean your styles aren't applied? Is the class "active" even set on the elements you're trying to add color to? — deadfishli, Jan 11 '17 at 08:41
Yes but i would like the tab to return to its normal (un-styled) state when i go to a new page, and the next pages menu tab should then be styled. — Luke Reece Meyer, Jan 11 '17 at 11:22
How do you set the menu tab active/how does the class get applied to the tab? How does your page know if it's active? — deadfishli, Jan 11 '17 at 12:27
You need **Javascript**. There are many questions on this - Try - http://stackoverflow.com/questions/16027629/changing-css-for-link-of-current-page-with-jquery — Paulie_D, Jan 11 '17 at 14:29

score 1 · Answer 1 · answered Jan 11 '17 at 08:54

1

you need to apply class like "active" to respective menu and apply css to it

like

#menu ul > li.active > a{
  color: red;
}

answered Jan 11 '17 at 08:54

Rahul

4,294
1
10
12

score 1 · Answer 2 · answered Jan 11 '17 at 09:07

You need to apply a class to the active menu item.

For example:

#menu ul > li.active > a{
  color: red;
  background:yellow;
}

Adding the css from above to your code gives you this result:

#menu ul {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #3d4449;
  font-family: "Roboto Slab", serif;
  font-family: 400;
  letter-spacing: 0.075em;
  list-style: none;
  margin-bottom: 0;
  padding: 0;
  text-transform: uppercase;
}
#menu ul a,
#menu ul span {
  border-bottom: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font-size: 0.9em;
  padding: 0.625em 0;
}
#menu ul a:hover,
#menu ul span:hover {
  color: #efa341;
}
#menu ul a.opener,
#menu ul span.opener {
  -moz-transition: color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  position: relative;
}

#menu ul > li.active > a{
  color: red;
}

<nav id="menu">
  <header class="major">
    <h2>Menu</h2>
  </header>
  <ul>
    <li class="active"><a href="index.html">Home</a>
    </li>
    <li>
      <span class="opener">Services</span>
      <ul>
        <li><a href="webdevelopment.html">Web Development</a>
        </li>
        <li><a href="customisedsoftwaredevelopment.html">Customised Software Development</a>
        </li>
        <li><a href="ecommercesolutions.html">E-commerce Solutions</a>
        </li>
        <li><a href="softwaremaintenance.html">Software Maintenace</a>
        </li>

      </ul>
    </li>

    <li>
      <span class="opener">Products</span>
      <ul>
        <li><a href="ikat.html">Practice Management Application</a>
        </li>
        <li><a href="Itrack.html">Electronic Claims</a>
        </li>
        <li><a href="iportals.html">Electronic Invoicing</a>
        </li>
        <li><a href="dalymorgan.html">Debt Recovery</a>
        </li>
        <li><a href="ibridge.html">Automated account collection</a>
        </li>
        <li><a href="lms.html">Learner Management System</a>
        </li>
      </ul>
    </li>


    <li><a href="projects.html">Projects</a>
    </li>
    <li><a href="aboutus.html">About Us</a>
    </li>
    <li><a href="contactus.html">Contact Us</a>
    </li>


  </ul>
</nav>

the (home) tab stays red when I activate a new menu item. i would like the tabs to be styled when i am on that specific page, and the rest to return to normal. — Luke Reece Meyer, Jan 11 '17 at 11:11
You need to add the class to the correct menu item. I assume you are making a static website? — Jeroen, Jan 11 '17 at 13:11

score 1 · Answer 3 · answered Jan 12 '17 at 08:06

1

You can use link:active in CSS like this:

menu ul a:active,
menu ul span:active {
  color: #ff0000;
}

It will allow you to adjust whatever you need when the link is clicked and active.

answered Jan 12 '17 at 08:06

LowMatic

223
2
13

score 1 · Answer 4 · answered Jan 12 '17 at 09:31

To sum it up:

You want to have active menu items to be styled differently
To achieve this without using JavaScript you have to add a class like "active" (as mentioned above) to your list item tag
You have to do that for each site with its active menu item

Also prefer to change style for list element (like Rahul's answer) rather than applying it to the ulclass like you did in your css.

score 0 · Answer 5 · edited Mar 30 '22 at 09:28

0

#menu > li.active > a{ color: #f46e28; } this will help you definitely.

edited Mar 30 '22 at 09:28

Jakub Kurdziel

3,216
2
12
22

answered Mar 29 '22 at 11:29

Er. laxman kumar

1

How Do I give the active menu items a different color - HTML5 CSS

5 Answers5