Current page link not highlighted

Question

I am building a webpage with a fixed side navigation. However the current page will not highlight the desired color. I have a "nav-item" on all of the nav links, and a "nav-item current" on the current page. I beleive the html is fine, and I think the css is fine as well, but I don't get why it won't highlight.

 .nav-container { display: block; clear: left; padding-top: 35px; } .navigation { width: 75%; margin: auto; clear: left; } .current { color: #36d9d3; } .nav-item { text-decoration: none; box-sizing: border-box; clear: left; float: left; display: block; margin: 10px; font-size: 20px; color: black; font-family: 'Raleway', sans-serif; -webkit-transition: 200ms color ease; } .nav-item:hover { color: grey; } 

 <div class="nav-container"> <nav class="navigation"> <a class="nav-item current" href="#">Illustrations</a> <a class="nav-item" href="#">Designs</a> <a class="nav-item" href="#">Artwork</a> <a class="nav-item" href="#">Photography</a> </nav> </div> 

Answer 1

Add !important to your colour for current as your style is getting over ridden. For styles defined in external stylesheets, the priority is in the order from bottom to the top for two identical attributes

 .nav-container { display: block; clear: left; padding-top: 35px; } .navigation { width: 75%; margin: auto; clear: left; } .current { color: #36d9d3 !important; } .nav-item { text-decoration: none; box-sizing: border-box; clear: left; float: left; display: block; margin: 10px; font-size: 20px; color: black; font-family: 'Raleway', sans-serif; -webkit-transition: 200ms color ease; } .nav-item:hover { color: grey; } 

 <div class="nav-container"> <nav class="navigation"> <a class="nav-item current" href="#">Illustrations</a> <a class="nav-item" href="#">Designs</a> <a class="nav-item" href="#">Artwork</a> <a class="nav-item" href="#">Photography</a> </nav> </div> 

Answer 2

look this and get an idea.

 $(document).on("click", 'ul li', function(){ $('ul li').removeClass('active'); $(this).addClass('active'); }); 

 a { color:#000; text-decoration:none; } a:hover { text-decoration:underline; } a:visited { color:#000; } .nav { padding:10px; border:solid 1px #c0c0c0; border-radius:5px; float:left; } .nav li { list-style-type:none; float:left; margin:0 10px; } .nav li a { text-align:center; width:55px; float:left; } .nav li.active { background-color:green; } .nav li.active a { color:#fff; font-weight:bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul class="nav"> <li><a href="#tab1">Menu 01</a> </li> <li>|</li> <li><a href="#tab2">Menu 02</a> </li> <li>|</li> <li><a href="#tab3">Menu 03</a> </li> </ul>