The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Current/Active Nav Bar Item Not Working?
icanswim70
post May 24 2019, 12:41 PM
Post #1


Newbie
*

Group: Members
Posts: 12
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
 
Reply to this topicStart new topic
Replies
icanswim70
post May 27 2019, 10:07 AM
Post #2


Newbie
*

Group: Members
Posts: 12
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

Posts in this topic


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

 



- Lo-Fi Version Time is now: 16th September 2019 - 03:04 AM