CODEWITHSUNDEEP
htmlcssnavigationhtml-lists
iMinichrispy
iMinichrispy

Reputation: 144

CSS - Change Active State of Navigation Bar While Preserving Color

I have a CSS nav property that I use for a navigation bar on my website. Each item on the nav bar has a different bottom border color, and the relevant code for this is below:

nav li.active a, nav li.active a:hover, nav a:active {
  border-bottom: 3px solid #48a9c0;
  <!--This code makes the nav bar item appear highlighted-->
  background: #323637;
  background-image: -webkit-linear-gradient(top, #484e4f, #323637);
  background-image: -moz-linear-gradient(top, #484e4f, #323637);
  background-image: -o-linear-gradient(top, #484e4f, #323637);
  background-image: linear-gradient(to bottom, #484e4f, #323637);
}

nav li.blue a, nav li.blue a:active {
  border-bottom-color: #48a9c0;

nav li.green a, nav li.green a:active {
  border-bottom-color: #56c93d;
}
nav li.red a, nav li.red a:active {
  border-bottom-color: #a54e49;
}

And this is how I am implementing this in my HTML file:

<ul>
  <li class="active"><a href="index.html">Home</a></li>
  <li class="green"><a href="page2.html">Page 2</a></li>
  <li class="red"><a href="page3.html">Page 3</a></li>
</ul>

My problem is that whenever I set the <li> item's class to "active," the bottom bar is always blue. How can I modify my CSS code to allow two states for the nav items: an active/highlighted state and a normal state (both with the same bottom bar color). This is my first time working directly with CSS, so go easy on me ;)

Upvotes: 0

Views: 8788

Answers (1)

Astrotim
Astrotim

Reputation: 2172

I think you may be confusing the active state of the <a> with the active class that is added to the <li> element. See this interpretation of what I think you mean: http://codepen.io/astrotim/pen/keiud

For this HTML (I have duplicated each nav item to represent the "active" class added)

<nav>
  <ul>
    <li class="blue"><a href="#">Normal</a></li>
    <li class="green"><a href="#">Normal</a></li>
    <li class="red"><a href="#">Normal</a></li>
    <li class="blue active"><a href="#">Active</a></li>
    <li class="green active"><a href="#">Active</a></li>
    <li class="red active"><a href="#">Active</a></li>
  </ul>
</nav>

I would use this CSS (note the CSS classes chained together, eg: .blue.active)

nav li a,
nav li a:hover,
nav li a:active {
  background: #999;
  border-bottom: 3px solid #48a9c0;  
}

nav li.active a, 
nav li.active a:hover, 
nav li.active a:active {
  background: #323637;
}

nav li.blue a, 
nav li.blue.active a {
  border-bottom-color: #48a9c0;
}
nav li.green a, 
nav li.green.active a {
  border-bottom-color: #56c93d;
}
nav li.red a, 
nav li.red.active a {
  border-bottom-color: #a54e49;
}

Upvotes: 1

Related Questions