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;
}
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;
}
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
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
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.
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.
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.
Then add this above your other links css.
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
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
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?
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?
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.

Oh okay, that's what I was doing wrong! I'll try adding it just to the pages themselves. thank you!!!!
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/
http://myweb.chatham.edu/students/Saman … amProject/
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/
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.
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.