CODEWITHSUNDEEP
css
Katethegreat
Katethegreat

Reputation: 11

CSS Nav bar current/active color link

First homepage. Nav bar color for current page isn't working. Suggestions? CSS below. Thanks.

HTML

<ul class="nav">
    <li><a href="Turf.html">HOME</a></li>
    <li><a href="Turf2.html">PRODUCTS</a></li>
    <li><a href="Turf3.html">STAFF</a></li>
    <li><a href="Turf4.html">LINKS</a></li>
    <li><a href="Turf5.html">CONTACT</a></li>
</ul>

CSS

.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:20;
padding:0;
text-align:center;
font-family:sans-serif;
}

.nav li{
display:inline-block;
color:#493D26;
font-size: 15px;
font-family:sans-serif;
}

.nav a{
display:inline-block;
border-width:1px 0;
padding:15px;
text-decoration:none;
color:#493D26;
font-size: 17px;
font-style:bold;
text-transform:capitalize;    
}

ul.nav a:hover{ 
color: #6CBB3C; 
}

ul.nav a:current{
color: #6CBB3C;
}

Upvotes: 1

Views: 1375

Answers (4)

om_jaipur
om_jaipur

Reputation: 2196

You can use jQuery trick:

You should add jQuery library file fist:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $("ul.nav li a").each(function()
    {
        if(this.href==window.location.href)
        {
            $(this).addClass('current');
            $(this).removeAttr('href');
        }
    });
});
</script>

and add this css:

ul.nav a.current{
    color: #6CBB3C;
}

Upvotes: 0

David Stanč&#237;k
David Stanč&#237;k

Reputation: 350

Oh dear..

Try .nav ul instead of ul.nav :)

Upvotes: 0

Amit singh
Amit singh

Reputation: 2036

check the snippet..

.nav {
  border: 1px solid #ccc;
  border-width: 1px 0;
  list-style: none;
  margin: 20;
  padding: 0;
  text-align: center;
  font-family: sans-serif;
}
.nav li {
  display: inline-block;
  color: #493D26;
  font-size: 15px;
  font-family: sans-serif;
}
.nav a {
  display: inline-block;
  border-width: 1px 0;
  padding: 15px;
  text-decoration: none;
  color: #493D26;
  font-size: 17px;
  font-style: bold;
  text-transform: capitalize;
}
ul.nav a:hover {
  color: #6CBB3C;
}
ul.nav a:visited {
  color: #6CBB3C;
}
<ul class="nav">
  <li><a href="#">HOME</a>
  </li>
  <li><a href="Turf2.html">PRODUCTS</a>
  </li>
  <li><a href="Turf3.html">STAFF</a>
  </li>
  <li><a href="Turf4.html">LINKS</a>
  </li>
  <li><a href="Turf5.html">CONTACT</a>
  </li>
</ul>

Upvotes: 0

kushal kant
kushal kant

Reputation: 450

You can use this css code also.

a:active : when you click on the link and hold it (active!). a:visited : when the link has already been visited.

If you want the link corresponding to current page to be highlighted, you can define some specific style to the link - 

ul.nav a:visited {
color: #6CBB3C;
}

Add this new class only to the corresponding li (link), either on server-side or on client-side (using javascript).

Upvotes: 1

Related Questions