Patrickniz
New Member
I don't think the title explains my problem very well. basically, on my nav bar, I want the current page to be a different colour.so for example if all the nav links were black, I want the current page of home to be red. I've tried this by giving the current page link a class and then defining it a colour, however it doesn't seem to change.heres my code:http://jsfiddle.net/SCd4h/\[code\] <style>.box {text-align: center;background-color: #F1F2F2;border: 1.5px #D1D3D4 solid;border-bottom: 3px solid red; margin: 5px; padding: 10px;}p {font-size: 15px;font-family: arial;color: #585858;}.logo {margin-left:70px;margin-top: -160px;}a:visited { text-decoration: none; color: black; font-weight: normal;}a:link { text-decoration: none; color: black; letter-spacing: 500;}a:hover { text-decoration: none; color: #FC3B3B; background: white;}a:active { text-decoration: none; color: red; font-weight: normal;}ul {list-style-type:none;margin-right:50px;margin-top: 60px;padding:5px;overflow: hidden;font-family: 'Paytone One', sans-serif;font-size: 18px;}li {display:inline;float:right;margin-right: 30px;}.current {font-family: 'Paytone One', sans-serif;font-size: 18px;color:red;}</style>\[/code\]\[code\]<body><ul><li><a href="http://stackoverflow.com/questions/14074107/index.html"/>HOME</a></li><li><a href="http://stackoverflow.com/questions/14074107/blog.html"/>BLOG</a></li><li><a href="http://stackoverflow.com/questions/14074107/photo.html" class="current"/>PHOTOS</a><li><li><a href="http://stackoverflow.com/questions/14074107/projects.html"/>PROJECTS</a></li></ul></br><img class="logo" src="http://stackoverflow.com/questions/14074107/louis2.png" alt="." width="149px" height="150px"/><div class="box"></div><div class="box1"></div><p>louismoore.net ? All rights reserved 2012</p></body>\[/code\]