Color for Visited Hyperlink

User 2719841 Photo


Guest
62 posts

When I add in the #navbar a:visited color to my CSS, that changes the color on my menu from white to the color I selected for once the link has been visited;

here's the code. I'm not sure why the visited color is changing the original white I chose for the menu elements? Or, I guess how can I edit the code so just the section being visited is shown in a different color in the menu? Thank you!

/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */

body {
background-color: #F8F8FF ;
font-family: Arial, Verdana, sans-serif;
font-size: 16px;
color: #006400;
}

header {
background-color: #006400;
color: #F8F8FF;
font-family: Arial, Verdana, sans-serif;
font-size: 50px;
text-align:center;
}

#navbar {
background-color: #006400;
line-height:2.6;
}

#navbar a {
color: #F8F8FF;
}

#navbar a:hover {
color: #A9A9A9;
}

#navbar a:visited {
color: #BDB76B;
}

.mrgnspc { /* this class can be used to space out an element in your page. */
margin-left: 10px;
margin-right: 35px;
font-size:20px;
text-decoration:none;
}

p {
line-height: 1.2;
}

h1 {
font-family: Arial, Verdana, sans-serif;
font-size: 20px;
color: #008000;
}

h2 {
font-family: Arial, Verdana, sans-serif;
font-size: 18px;
color: #008000;
}

img {
border: 4px solid black;
}

a {
text-decoration:none;
}
User 187934 Photo


Senior Advisor
20,271 posts

A link to your published page is better.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2719841 Photo


Guest
62 posts

http://myweb.chatham.edu/students/Saman … index.html
What I am trying to make happen is for the particular page being viewed to be shown in a different color in the menu. So, if the "Chatham Contacts" page is being viewed, "Chatham Contacts" will appear in a color other than white in the menu.

I hope that makes sense.
User 187934 Photo


Senior Advisor
20,271 posts

Yes you want what I call a select class.
Add the class to the link that matches the page it's actually on.
On the HOME page the link would have the select class added.
<span class="mrgnspc select"><a href="index.html">HOME</a></span>
.
Then add this above your other links css.
#navbar .select a { color:#FF0000; }

I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2719841 Photo


Guest
62 posts

When I tried that, it changed the color of "Home" immediately but then when I viewed the other pages, it didn't work. I just would like the color to change to reflect the page being viewed. Do I need to add "select" to each span class for the menu?
User 2484360 Photo


Registered User
3,293 posts

Samantha.Gussow wrote:
When I tried that, it changed the color of "Home" immediately but then when I viewed the other pages, it didn't work. I just would like the color to change to reflect the page being viewed. Do I need to add "select" to each span class for the menu?


Only on the pages themselves. So on the home page your Home link would have the .selected class, on your About page your about link would have the .selected class and so on. :)
User 2719841 Photo


Guest
62 posts

Oh okay, that's what I was doing wrong! I'll try adding it just to the pages themselves. thank you!!!!
User 2719841 Photo


Guest
62 posts

Slight issue: Now when I go to my website, the "Home" element in the menu shows up in the color I selected for once a link is visited. Do I have to enter something else in the code so when you first arrive at my site, "Home" is shown in white?

http://myweb.chatham.edu/students/Saman … amProject/
User 2484360 Photo


Registered User
3,293 posts

Samantha.Gussow wrote:
Slight issue: Now when I go to my website, the "Home" element in the menu shows up in the color I selected for once a link is visited. Do I have to enter something else in the code so when you first arrive at my site, "Home" is shown in white?

http://myweb.chatham.edu/students/Saman … amProject/


From what you described here and the code that Eric provided was for a selected (active) class. Which means when you are on that page the color of the link is white not when you have visited it.

For that you would need the a.visited CSS added to your CSS file.
User 2719841 Photo


Guest
62 posts

I don't understand...when I did the navbar a visited, that did not work. When I added the "select" to the mrgnspc in the menu, that did what I intended...except that when I go to the site now, "Home" is in tan.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.