CODEWITHSUNDEEP
cssnav
Nguyen Tuan
Nguyen Tuan

Reputation: 13

How do i make 'active' navigation icon by hover or click?

<div class="nav">
<div class="container">
<ul>
    <li><a href="#"><i class="icon-info"></i></a></li>
    <li><a href="#"><i class="icon-edu"></i></a></li>
    <li><a href="#"><i class="icon-employment"></i></a></li>
    <li><a href="#"><i class="icon-skills"></i></a></li>
    <li><a href="#"><i class="icon-photo"></i></a></li>
    <li><a href="#"><i class="icon-personality"></i></a></li>
</ul>
</div>
</div>

I wanted to make an image navigation bar with active and inactive mode. Active mode is on when hover over or clicked on. So i created the basic navigation list above, then added some CSS codes below.I have already get to the point where browser show all unactive icons by default. I want to make a single page website, so all navigation icons here will link to a certain place within the page (im also trying to figure out how).

.icon-edu {background-image: url("./Img/Icon-edu.png");
background-repeat: no-repeat;
}
.icon-edu: hover, 
.icon-edu: active {
background-image: url("./Img/Icon-edu-active.png");
}

So the problem is, i cannot get the active icon when i hover over the icon, or when they are active. I am not sure what else i need to do? I am the most newbie-ish newbie, i started with Codecademy and went on making a website. Please take it easy on me :D

Upvotes: 0

Views: 3674

Answers (1)

drawde83
drawde83

Reputation: 139

firstly you need to have some text in your i tags otherwise it's width will be 0px and you won't see anything (for icons you may want a div with fixed dimensions, but thats another problem) I used a background colour and some dummy text to get it working.

also your selectors don't connect to your a tags. so this will work.

    a:hover .icon-edu, 
    a:active .icon-edu {
        background-image: url("./Img/Icon-edu-active.png");
    }

for having an active state for a clicked link it's easiest to add another class to the link, in the code that generates the page. In your case you'll need to use jQuery which is a bit more complicated.

Upvotes: 0

Related Questions