Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Current/Active Nav Bar Item Not Working?

Posted by: icanswim70 May 24 2019, 12:41 PM

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

Posted by: pandy May 24 2019, 03:58 PM

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

Posted by: Christian J May 25 2019, 10:05 AM

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.

Posted by: icanswim70 May 27 2019, 10:07 AM

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>


Posted by: icanswim70 May 27 2019, 10:08 AM

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;
}

Posted by: Christian J May 27 2019, 02:47 PM

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



Posted by: pandy May 27 2019, 07:12 PM

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>


Posted by: Christian J May 28 2019, 06:07 AM

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.


Posted by: pandy May 28 2019, 06:53 AM

Or if you use really flashy colors. tongue.gif

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)