Current/Active Nav Bar Item Not Working? |
Current/Active Nav Bar Item Not Working? |
icanswim70 |
May 24 2019, 12:41 PM
Post
#1
|
Newbie Group: Members Posts: 15 Joined: 23-May 19 Member No.: 26,898 |
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... This post has been edited by icanswim70: May 24 2019, 12:44 PM |
pandy |
May 24 2019, 03:58 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
It didn't, I'm afraid. You'd also need to show the HTML and CSS for the navbar.
|
Christian J |
May 25 2019, 10:05 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
|
icanswim70 |
May 27 2019, 10:07 AM
Post
#4
|
Newbie Group: Members Posts: 15 Joined: 23-May 19 Member No.: 26,898 |
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 |
May 27 2019, 10:08 AM
Post
#5
|
Newbie Group: Members Posts: 15 Joined: 23-May 19 Member No.: 26,898 |
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 |
May 27 2019, 02:47 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
May 27 2019, 07:12 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
May 28 2019, 06:07 AM
Post
#8
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
May 28 2019, 06:53 AM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Or if you use really flashy colors.
|
Lo-Fi Version | Time is now: 24th April 2024 - 06:19 AM |