navmenu CSS properties not working
-
I have a nav bar of top level categories in my header (upper right edge of page). There are 7 items in the list. They are displaying inconsistent a:link, a:hover, and a:visited properties.
Below is the section of my css that handles navmenu styles. I will also show the section in my header.php file where the navmenu appears.
I’m using Black and White theme, and have modified its architectural structure.
My blog is: http://www.albereo.com/melanie
Here is CSS code:
#navmenu a:link {
text-decoration: underline;
color: FFB915;
}
#navmenu a:hover {
text-decoration: none;
color: BD6406;
}
#navmenu a:visited {
color: FFB915;
}
#navmenu ul{
list-style-type: none;
list-style-image: none;
}
#navmenu ul li{
display: inline;
padding: 0 0 0 10px;
}
#navmenu ul li a:link {
text-decoration: underline;
color: FFB915;
}
#navmenu ul li a:hover {
text-decoration: none;
color: BD6406;
}
#navmenu ul li a:visited {
text-decoration: underline;
color: FFB915;
}Here is header.php code:
<div id=”navmenu”>
- “>Home
- “>
<?php if ($bnw_rss_title) {
echo $bnw_rss_title;
} else {
echo “RSS Feed”;
} ?> - “>RSS Feed
<?php wp_list_categories(‘sort_column=menu_order&depth=1&title_li=’);
if ($bnw_rss_feed) {
?><?php } else { ?>
<?php } ?>
</div>
Thanks for any help you can offer.
-
as i can only assume what ‘inconsistant’ means, i think it has to do that the :visited style is defined after the :hover style and makes the links that you have already visited kind-of unchanged on hover.
have a look at this:
http://www.w3schools.com/CSS/css_pseudo_classes.aspThat was the solution for the navmenu links.
There’s a second issue that I thought this would clear up but didn’t. The :link and :visited colors are the same throughout my css style. Yet, the category and tag links that accompany each post is showing different :link and :visited colors. (The :link is yellow and the :visited is ivory; both should be ivory).
Here is my css code again with all the link preferences:
h1 a{
color: #FFB915;
text-decoration: underline;}
h1 a:visited{
color: #FFB915;
text-decoration: underline;}
h1 a:hover{
text-decoration: none;
color: #FFB915;}
a:link{text-decoration: underline;
color: #FFB915;}
a:visited{text-decoration: underline;
color: #FFB915;}
a:hover{
text-decoration: none;
color: #FFB915;}
p{
padding: 10px 0 0 0;}
#wrapper{
float: center;
margin: 0 auto 0 auto;
width: 990px;
text-align: left;}
#header{
float: center;
width: 990px;
height: 90px;
color: #FFB915;
background: url(images/header_logo_web.jpg); }
#htitle{
float: left;
margin: 17px 10px 0 0;}
#desc{
float: left;
color: #000000;
margin: 25px 10px 0 0;}
#navmenu{
float: right;
margin: 0px 10px 0;}
#navmenu a:link {
text-decoration: underline;
color: FFB915;}
#navmenu a:visited {
text-decoration: underline;
color: FFB915;}
#navmenu a:hover {
text-decoration: none;color: FFB915;}
#navmenu ul{
list-style-type: none;
list-style-image: none;}
#navmenu ul li{
display: inline;
padding: 0 0 0 10px;}
#navmenu ul li a:link {
text-decoration: underline;
color: FFB915;}
#navmenu ul li a:visited {
text-decoration: underline;
color: FFB915;}
#navmenu ul li a:hover {
text-decoration: none;color: FFB915;}
#container{
float: center;
width: 990px;
margin: 0 0px 0 0;
background: #000000;
}
#postcon{
margin: 10px 0;}
.post{
padding: 10px 20px;}
.post a{
color: #E9D5A0
text-decoration: underline;
}
.post a:visited{color: #E9D5A0;
text-decoration: underline;}
.post a:hover{
color: #E9D5A0;
text-decoration: none;}
.post h2{
font-family: Bell, Times, Times New Roman;
font-size: 20px;
color: #FFB915;
line-height: 28px;}
.post h2 a{
color: #FFB915;}
.entry{
line-height: 18px;}
.postmetadata{
float: center;
border-top: 0px solid #7F0303;
padding: 0px 40px 40px 0px;
color: #000000;}
.metabox{
float: center;
width: 80%;
line-height: 20px;
margin: 15px 0;
padding: 5px 0px 5px 5px;
background: #000000;
}
.navigation{
clear: left;
padding: 10px 10px;
background: url(images/top-nav-bar.jpg);
color: #340707;
width: 970px;
height: 15px;}
.commentlink{
padding: 2px 0 2px 20px;
background: 000000;
margin-left: 10px;}
.editcomment{
padding: 2px 0 2px 20px;
background: 000000;
margin-left: 10px;}
.catlink{
padding: 2px 0 2px 20px;
background: 000000;
}.taglink{
display: block;
padding: 2px 0 2px 20px;
background: 000000;}
/*Tags
—————————————————–*/
.tags,
#tag_cloud {
margin: 0 0 15px;}
.tags {
text-align: left;}
.tags a,
#tag_cloud a {
color: #AAA;
margin: 0 2px;}
.cle{
clear: both;}
/*Footer
—————————————————–*/
#footer{
clear: both;
float: center;
text-align: center;
width: 990px;
line-height: 20px;
margin: 15px 0;
padding: 0 0 0 0px;}
#footermenu{
float: center;
margin: 0px 0 0 0;}
#footermenu a:link {
text-decoration: underline;
color: 340707;}
#footermenu a:visited {
text-decoration: underline;
color: 340707;}
#footermenu
a:hover {
text-decoration: none;color: 340707;}
#footermenu ul{
list-style-type: none;
list-style-image: none;}
#footermenu ul li{
display: inline;
padding: 0 0 0 20px;}
#footermenu ul li a:link {
text-decoration: underline;
color: 340707;}
#footermenu ul li a:visited {
text-decoration: underline;
color: 340707;}
#footermenu ul li a:hover {
text-decoration: none;
color: 340707;}
here is a semicolon missing after the color code:
.post a{ color: #E9D5A0 text-decoration: underline; }
btw: there is no need to post the style codes as style.css (and all styles) is easily accessible with a link to your site.
That cleared up the issue.
Many thanks alchymyth.
- The topic ‘navmenu CSS properties not working’ is closed to new replies.