Help - Search - Members - Calendar
Full Version: Current/Active Nav Bar Item Not Working?
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
icanswim70
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...
pandy
It didn't, I'm afraid. You'd also need to show the HTML and CSS for the navbar.
Christian J
QUOTE(icanswim70 @ May 24 2019, 07:41 PM) *

I hope the screen shot attached...

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.
icanswim70
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>

icanswim70
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;
}
Christian J
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
CODE
<a href="foo.html" class="foo">Foo</a>
<a href="bar.html" class="bar">Bar</a>


in foo.html
CODE
<body class="foo">


and in bar.html
CODE
<body class="bar">


in an external stylesheet
CODE
body.foo a.foo,
body.bar a.bar {...}


pandy
QUOTE(icanswim70 @ May 24 2019, 07:41 PM) *

As the name suggests I have the respective classes coded to highlight the current page on the Nav bar


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...

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>a:active</title>

<style type="text/css">
body      { background: black }
a         { color: white; font: bold 300% Verdana, sans-serif }
a:active  { color: red }
</style>

</head>



<body>

<p>
<a href="http://htmlhelp.com">The WDG</a></p>

</body>
</html>

Christian J
QUOTE(pandy @ May 28 2019, 02:12 AM) *

Nope. I don't see anything like that.

In particular, this selector:

CODE
li a.current

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).

QUOTE
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.

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

pandy
Or if you use really flashy colors. tongue.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.