Nav bar link to stay highlighted

Get Started
1

hi,

i was wondering if there was a way to do this with css so that the user will know what page they’re on. i tried doing it in html with class selectors and inline styles, but it’s not working.

for example, on my nav bar, i have three pages. ‘about’, ‘contact’, and ‘portfolio’. the text colors are black by default, but change to pink when you hover over them. i would like the pink color to stay when you’re on that page. so ‘contact’ would stay pink after you click on the page. however, the text link colors don’t seem to be changing. any ideas? (snipped a bit of the top part since i can’t include links.)



	<div id="navigation">
		<ul>
			<li><a href="about***">about</a></li>
			<li><a href="portfolio***">portfolio</a></li
			<li><a href="contact***">contact</a></li>
		</ul>
	</div><!--end of navigation div-->
	<div id="bodycontent">
	<div id="contactheader">
	<h2>CONTACT</h2>
	</div>
	<div id="contact">
	<img src="imagescontact.png">
	</div>
	<ul id="contact">
		<li class="blackfont">WANT</li>
		<li class="pinkfont">PURE?</li>
	</ul
	<p class="pinkfont">CONTACT9999PURCOM</p>

	  </body>
      </div>

	 </html>

/*
CSS for Will Portfolio site
*/

html {
margin:-10px;
padding: 0px;
height: 1000px;
width: 850px;
margin-left: auto;
margin-right: auto;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin-left: auto;
margin-right: auto;
text-align: left;
}
a {
  font-weight: light;
  color: black;
  text-decoration: none;
}

a:link {
  text-decoration: none;
}

a:visited {
  color: black;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #ec008c;
}

a: active {
  text-decoration: none;
  color: #ec008c;
}

li {
list-style-type: none;
}
#bodycontent {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 25px;
font-weight:normal;
width: 1000px;
clear: left;
padding-top: 34px;
}
div#navigation {
height: 30px;
width: 400px;
margin: 0 0 0 105;
padding: 75px 0 0 20px;
float: right;
}
div#navigation li{
display: inline;
float: right;
margin: 0 5px 0 25px;
width: 75px
text-align; left;
}
div#header img{
float:left;
width: 300px;
display: block;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight:bold;
padding: 18px;
}
div#container {
margin: 0px auto;
width: 1000px;
}
div#links li{
margin: 0 0 0 -23px;
}
a img {
border-style: none;
display: block;
}
div#contactheader {
float:left;
}
div#contact {
padding: 30px 0 0 210px;
}
.blackfont {
font-size: 18px;
font-weight:bold;
}
.pinkfont {
font-size: 18px;
font-weight:bold;
color: #ec008c;
}
.pink {
color: #ec008c;
}
2

correct me if im wrong but i don’t think this can be done with css and html. It will require another language(like php). Using php you can check what page the user requested, and if the link is in the navigation apply an extra style/class/id to it.

Heres a link i found online: alistapart

3

I’m not sure if this is what you are looking for, but what I do is in the navigation list label the link of the page that is active with id=“current”, and then in my css, I style #current to make the link or tab or button for the current page have the look that I want. It works well for me.

4

That works fine for smaller sites, but as soon as you start to create a more dynamic site with lots of pages, it can become a pain to update all of them manualy.

5

here is what i use to show links as active

<?php $page = basename($_SERVER['SCRIPT_NAME']); ?>



<a<? if($page == 'PAGE 1 URL HERE') print ' style="text-decoration:underline;"'; ?>  href="PAGE 1 URL HERE">Home</a>  ||

a<? if($page == 'PAGE 2 URL HERE') print ' style="text-decoration:underline;"'; ?>  href="PAGE 2URL HERE">page 2</a>

Of course instead of using the underline you could use a background image or any css stuff you like

6

thank you all for the replies! i tried doing it this way…i’m not making a crazy site with a lot of pages, although if someone took the time to show me how to implement the php into my code, i’d appreciate it also!

however, i just tried doing it the simple way and its still not working. i feel like i’m doing it wrong with my class selectors.


/*
CSS for Tim Portfolio site
*/


body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
a {
  font-weight: bold;
  color: black;
  text-decoration: none;
}

a:link {
  color: black;
  text-decoration: none;
}

a:visited {
  color: black;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #962f34;
}

a: active {
  color: aqua;
  background-color: navy;
}

li {
list-style-type: none;
}
#bodycontent {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight:normal;
width: 200px;
clear: left;
padding-top: 34px;
}
div#navigation {
height: 30px;
width: 100&#37;;
margin: 0 0 0 105px;
padding: 0 0 0 20px;
font-size: 20px;
line-height: 23px;
0;}
div#navigation ul{
white-space: nowrap;
margin: 5px 0 0 0;
}
div#navigation li{
margin: 5px 0 0 0;
clear: right;
}
div#header img{
float:left;
width:300px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight:bold;
}
div#contact {
clear: both;
width: 500px;
font-size: 20px;
margin: 120px 0 0 50px;
}
div#aboutcontent{
clear: both;
width: 500px;
font-size: 20px;
margin: 120px 0 0 50px;
}
.current {
font-color: #962f34;
color: #962f34;
}
a.current:link {
color: #962f34;
}

	<head>
	  <title>about me</title>
	  <meta http-equiv="Content-Type"
	  	content="text/html; charset=utf-8"/>
	  	<link href="style1.css" rel="stylesheet" type="text/css" />
	 </head>

	<body>
	<div id="header">
		<img src="image****">
		</div>
		<div id="navigation">
			<ul>
				<li><a href="index****">Home</a></li>
				<li class="current"><a href="contact****">Contact</a></li>
				<li><a href="about***">About</a></li>
				<li><a href="resume***">Resumepdf</a></li>
			</ul>
	</div><!--end of navigation div-->
	<div id="contact">
	     <p>You can reach me by phone or email me.
		</p>
	      </div>
	  </body>


	 </html>
7

The only thing you were really doing wrong was assigning it to the li instead of the link. It doesn’t necessarily matter but i also used an id instead of a class in the example because you are probably only using it once so it shouldn’t matter. Anyway here is working code.



	<head>
	  <title>about me</title>
	  <meta http-equiv="Content-Type"
	  	content="text/html; charset=utf-8"/>
		<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
a {
  font-weight: bold;
  color: black;
  text-decoration: none;
}

a:link {
  color: black;
  text-decoration: none;
}

a:visited {
  color: black;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #962f34;
}

a: active {
  color: aqua;
  background-color: navy;
}

li {
list-style-type: none;
}
#bodycontent {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight:normal;
width: 200px;
clear: left;
padding-top: 34px;
}
div#navigation {
height: 30px;
width: 100%;
margin: 0 0 0 105px;
padding: 0 0 0 20px;
font-size: 20px;
line-height: 23px;
0;}
div#navigation ul{
white-space: nowrap;
margin: 5px 0 0 0;
}
div#navigation li{
margin: 5px 0 0 0;
clear: right;
}
div#header img{
float:left;
width:300px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight:bold;
}
div#contact {
clear: both;
width: 500px;
font-size: 20px;
margin: 120px 0 0 50px;
}
div#aboutcontent{
clear: both;
width: 500px;
font-size: 20px;
margin: 120px 0 0 50px;
}
#current {
color: #962f34;
}
</style>
	 </head>

	<body>
	<div id="header">
		<img src="image****">
		</div>
		<div id="navigation">
			<ul>
				<li><a href="index****">Home</a></li>
				<li><a href="contact****" id="current">Contact</a></li>
				<li><a href="about***">About</a></li>
				<li><a href="resume***">Resumepdf</a></li>
			</ul>
	</div><!--end of navigation div-->
	<div id="contact">
	     <p>You can reach me by phone or email me.
		</p>
	      </
8

In your later post you are on the right track. :slight_smile:

You add a class to the current page list-item and by that you can style both the li and the link if you wish:

#navigation .current a {
	color: #962f34;
}

<li class="current"><a href="contact.html">Contact</a></li>

Another more maintainable way if your site grows, is to add an id (or class) to the body-tag and style current page link using that in a similar way. This way you can have exactly the same nav-list on all pages and you can later style whatever you want different in those pages. I id all pages body (or main container) in my sites:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>about me</title>
<style type="text/css">
/*
CSS for Tim Portfolio site
*/
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
a {
	font-weight: bold;
	color: black;
	text-decoration: none;
}
a:link {
	color: black;
	text-decoration: none;
}
a:visited {
	color: black;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: #962f34;
}
a: active {
	color: aqua;
	background-color: navy;
}
li {
	list-style-type: none;
}
#bodycontent {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: normal;
	width: 200px;
	clear: left;
	padding-top: 34px;
}
div#navigation {
	height: 30px;
	width: 100%;
	margin: 0 0 0 105px;
	padding: 0 0 0 20px;
	font-size: 20px;
	line-height: 23px;
	0;
}
div#navigation ul {
	white-space: nowrap;
	margin: 5px 0 0 0;
}
div#navigation li {
	margin: 5px 0 0 0;
	clear: right;
}
div#header img {
	float: left;
	width: 300px;
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 25px;
	font-weight: bold;
}
div#contact {
	clear: both;
	width: 500px;
	font-size: 20px;
	margin: 120px 0 0 50px;
}
div#aboutcontent {
	clear: both;
	width: 500px;
	font-size: 20px;
	margin: 120px 0 0 50px;
}
#homepage .home a:link,
#contactpage .contact a:link,
#aboutpage .about a:link,
#resumepage .resume a:link {
	color: #962f34;
}
</style></head>

<body id="contactpage">

<div id="header">
	<img src="image****">
</div>
<div id="navigation">
	<ul>
		<li class="home"><a href="index****">Home</a></li>
		<li class="contact"><a href="contact****">Contact</a></li>
		<li class="about"><a href="about***">About</a></li>
		<li class="resume"><a href="resume***">Resumepdf</a></li>
	</ul>
</div><!--end of navigation div-->
<div id="contact">
	<p>You can reach me by phone or email me.
</p>
	</div>
	
</body></html>
9

An example of another thing you can do with the current link, is to avoid that the visitor hovers and clicks the current link reloading the page. Usually people never click if the hover cursor is not telling the link is clickable.

#navigation .current a {
color: #962f34;
cursor: default;
}

#homepage .home a:link,
#contactpage .contact a:link,
#aboutpage .about a:link,
#resumepage .resume a:link {
    color: #962f34;
    cursor: default;
}
10

wow! this is awesome, it works! i guess i need to practice and get better at this. it’s pretty exciting tho since i’m learning something every day.

i just want to say thank you guys for all of your help and your patience!

11

thanks for that tip erik.j

Its something I will certainly be making a note of!