CODEWITHSUNDEEP
cssnav
user1842842
user1842842

Reputation: 105

CSS nav bar current page color alteration

I'm trying to make it so that I can add a class to the link for the current page and the background will stay filled in teal (As it would when hovered)

However, as it is at the moment, the link text is displaying in the teal still(pic part 1), even though the css says display it white (pic part 2)

the css I have is:

#nav a:link, a:visited {
    font-weight: bold;
    color: #066;
    text-align: center;
    padding: 8px;
    text-decoration: none;
    text-transform: uppercase;
}
#nav a:hover, a:active {
    display: block;
    background-color: #066;
    color: #fff;
}
#nav a.selected:link, a.selected:active{
    display: block;
    background-color: #066;
    color: #fff;
}

#nav a.selected:hover, a.selected:active {
    display: block;
    background-color: #066;
    color: #fff;
}

the html is 

<div id="nav">
                <ul>
                    <li ><a href="" class="selected">HOME</a></li>
                    <li><a href="">ABOUT</a></li>
                    <li><a href="">SOLUTIONS</a></li>
                    <li><a href="">CONSULTANCY</a></li>
                    <li><a href="">SUPPORT</a></li>
                    <li><a href="">CONTACT US</a></li>

            </ul>
            </div>

Nav Bar

When I inspect the element in firefox, its showing that the color should be white. So it should be showing correctly, but it's not. Any idea what I'm doing wrong? I've cleared cache and that didnt sort it.

Upvotes: 1

Views: 22467

Answers (4)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

:active is a state but :link not. Link is referring to the attr of the anchor so

Change 

#nav a.selected:link, a.selected:active

to

#nav a[href].selected, a.selected:active 

#nav a:link, a:visited {
    font-weight: bold;
    color: #066;
    text-align: center;
    padding: 8px;
    text-decoration: none;
    text-transform: uppercase;
}
#nav a:hover, a:active {
    display: block;
    background-color: #066;
    color: #fff;
}
#nav a[href].selected, a.selected:active{
    display: block;
    background-color: #066;
    color: #fff;
}

#nav a.selected:hover, a.selected:active {
    display: block;
    background-color: #066;
    color: #fff;
}
<div id="nav">
    <ul>
        <li ><a href="" class="selected">HOME</a></li>
        <li><a href="">ABOUT</a></li>
        <li><a href="">SOLUTIONS</a></li>
        <li><a href="">CONSULTANCY</a></li>
        <li><a href="">SUPPORT</a></li>
        <li><a href="">CONTACT US</a></li>
     </ul>
</div>

Upvotes: 1

DaniP
DaniP

Reputation: 38252

You have styled all the states for the selected item but not the default just add the selector for the item without state:

#nav a.selected, #nav a.selected:link, a.selected:active

#nav a:link,
a:visited {
  font-weight: bold;
  color: #066;
  text-align: center;
  padding: 8px;
  text-decoration: none;
  text-transform: uppercase;
}
#nav a:hover,
a:active {
  display: block;
  background-color: #066;
  color: #fff;
}
#nav a.selected, #nav a.selected:link,
a.selected:active {
  display: block;
  background-color: #066;
  color: #fff;
}
#nav a.selected:hover,
a.selected:active {
  display: block;
  background-color: #066;
  color: #fff;
}
<div id="nav">
  <ul>
    <li><a href="" class="selected">HOME</a>
    </li>
    <li><a href="">ABOUT</a>
    </li>
    <li><a href="">SOLUTIONS</a>
    </li>
    <li><a href="">CONSULTANCY</a>
    </li>
    <li><a href="">SUPPORT</a>
    </li>
    <li><a href="">CONTACT US</a>
    </li>
  </ul>
</div>

Upvotes: 2

Bindiya Patoliya
Bindiya Patoliya

Reputation: 2764

Try this :

Simply change this css #nav a.selected:link, a.selected:active with #nav a.selected, a.selected:active and your problem will solve

Upvotes: 0

vaso123
vaso123

Reputation: 12391

Change this 

#nav a.selected:link, a.selected:active {

to this 

#nav a.selected:link, a.selected:visited{

FIDDLE

You are tried to set active twice.

Upvotes: 3

Related Questions