Menu Query - Post ID 239679

User 2719841 Photo


Guest
62 posts

Thank you so much, I'll try that. Also, to make the links in the menu change color once they're clicked, would I do navbar a hover and then choose a color?
User 187934 Photo


Senior Advisor
20,271 posts

#navbar a:hover
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

Okay, this is my last question; how do I code it so once a link in the menu has been clicked, it changes color?
User 187934 Photo


Senior Advisor
20,271 posts

#navbar a { color:#f8f8ff; }
#navbar a:visited { color:#800080; }
#navbar a:hover { color:#008000; }
#navbar a:active { 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

Got it! Thanks so much for all your help, I learned so much!
User 271657 Photo


Ambassador
3,816 posts

You could use a list for your nav:

ul#nav {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
background-color: #006400;
}

ul#nav li {
display: inline;
font-family: Arial, Verdana, sans-serif;
font-size: 20px;
color: #F8F8FF; <<< or #FFF for white
text-decoration:none;
}

ul#nav li a,
ul#nav li a: visited {
text-decoration: none;
color: #FFF;
}

ul#nav li a:hover {
color: #some color;
}
------------------
HTML:
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

Add, adjust margins and padding as needed. If this is underneath the header, you could give the <ul> a bit of negative margin to makeit overlap the bottom of the header to get rid of white space. But you could also just put it in the header under the big text which should be your <h1> tag.

:lol: I type too slow
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2719841 Photo


Guest
62 posts

When I add in the #navbar a:visited color, that changed 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;
}

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.