The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Current/Active Nav Bar Item Not Working?
icanswim70
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 24 2019, 03:58 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 25 2019, 10:05 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
icanswim70
post 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>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
icanswim70
post 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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 27 2019, 02:47 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,628
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 {...}


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 27 2019, 07:12 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 28 2019, 06:07 AM
Post #8


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 28 2019, 06:53 AM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Or if you use really flashy colors. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 04:27 AM