Hey everyone,

As the name suggests I have the respective classes coded to highlight the current page on the Nav bar, but it isn't working whatsoever. Is it missing something?

*NOTE* This website is coded with HTML and CSS exclusively and would like to avoid Java if possible.

Thanks

I hope the screen shot attached...

It didn't, I'm afraid. You'd also need to show the HTML and CSS for the navbar.

After you've uploaded the image to your forum account, you still need to insert it into your forum post. Often members miss the last part, the forum instructions are alas a bit obscure on this part.

Let's try this again

CODE:

li a:hover {
color: yellow;
border: 1px solid white;
background-color: blue;
font-size: 26px;
}

li a:active {
background-color: white;
border-bottom: 1px solid;
border-bottom-color: white;
}

li a.current {
background-color: green;
border-bottom: 1px solid;
border-bottom-color: white;
}

And HTML is just a simple navbar

<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="https://www.youtube.com/user/" target=_blank>Youtube</a></li>
<li><a href="About.html">About</a></li>
<li><a href="Contact.html">Contact</a></li>
<li><a href="Submit.html">Have An Idea</a></li>
<li><a href="Factory.html">The Factory</a>
<li><a href="Membership.html">Join the Team!</a></li>
</ul>

acttually this may be of interest too

ul {
list-style-type:none;
margin: 8px;
padding: 4px;
overflow: hidden;
background-color:#000000;
height: 30px;
width: 100%;
text-align: center;

}

li {
display:inline;
text-align: center;
font-size: 25px;
padding-left: 45px;
}

li a {
color: white;
text-decoration: none;
}

One old trick is to give each link a different CLASS, and then use the same CLASS on each corresponding page's BODY element. For example:

nav menu


in foo.html


and in bar.html


in an external stylesheet

Nope. I don't see anything like that.

I wonder if you have misunderstood a:active? It doesn't mean a link to the current page. It's means the state a link is in for a brief moment exactly when it's clicked. If you just click as you normally do it's so brief it's hard to see.

But if you make it extreme...

In particular, this selector:


won't do anything by itself, it's just an ordinary CLASS name (and there is no link using that CLASS in the HTML anyway).


Yes, it's mostly when a page takes time to respond you may notice.

Or if you use really flashy colors.