Design Problem.. Need some input if you will!
Permalink
I'm having a design issue and for the life of me I can't figure it out so I'm calling out to the people who know what they are doing for some help. I have an autonav that I am trying to customize. What I would like to do is change the text color on hover. I can get the background color to change on hover but not the text. I have tried about everything I can think of. I know this should be simple but I'm struggling here! Ok here's my nav code:
header nav {
margin:auto;
width:990px;
position: absolute;
top: 48px;
right: 0;
z-index: 9;
}
header nav ul { }
header nav ul li {
float: left;
position: relative;
border: 1px solid transparent;
}
header nav ul li.lastItem {
background: none;
}
header nav ul li a {
display:block;
color: #666;
font-size: 24px;
height: 24px;
padding: 8px 17px 10px 15px;
text-decoration: none;
font-weight: bold;
}
header nav ul li a:hover {
/*if I'm not mistaken, line should change the color when hovering.
some code works for instance background:#fff; will change the bg
color but a simple color:#fff; will not change the font neither will
font-size or any other code I put in here. So what's my deal?*/
}
header nav ul li:hover, header nav ul li.nav-selected, header nav ul li.nav-path-selected {
background: #c3beac;
border-color: transparent #fff #fff transparent;
}
header nav ul ul { display: none;
position: absolute;
top: 40px; left: 0;
width: 170px;
padding: 10px 15px;
background: #c4bfac;
-moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
}
header nav ul li:hover ul {
display: block;
}
header nav ul li ul li {
float: none;
background: none;
padding: 0 5px;
}
header nav ul li ul li a {
font-size: 14px;
color: #fff;
display: block;
position: relative;
font-size: 14px;
height: auto;
padding: 4px 0;
-moz-text-shadow: 1px 1px 0 #8c8671;
-webkit-text-shadow: 1px 1px 0 #8c8671;
text-shadow: 1px 1px 0 #557904;
}
header nav ul li ul li:hover, header nav ul li ul li.nav-selected {
background: #b1aa91;
border-color: transparent #d0cdbe #d0cdbe transparent; }
Any insight would be awesome and appreciated! I'm originally using the rigidlite
theme and just trying to tweak it a bit but I'm having a bad case of tweaker nub
problems. my website ishttp://www.yaffeco.net
header nav {
margin:auto;
width:990px;
position: absolute;
top: 48px;
right: 0;
z-index: 9;
}
header nav ul { }
header nav ul li {
float: left;
position: relative;
border: 1px solid transparent;
}
header nav ul li.lastItem {
background: none;
}
header nav ul li a {
display:block;
color: #666;
font-size: 24px;
height: 24px;
padding: 8px 17px 10px 15px;
text-decoration: none;
font-weight: bold;
}
header nav ul li a:hover {
/*if I'm not mistaken, line should change the color when hovering.
some code works for instance background:#fff; will change the bg
color but a simple color:#fff; will not change the font neither will
font-size or any other code I put in here. So what's my deal?*/
}
header nav ul li:hover, header nav ul li.nav-selected, header nav ul li.nav-path-selected {
background: #c3beac;
border-color: transparent #fff #fff transparent;
}
header nav ul ul { display: none;
position: absolute;
top: 40px; left: 0;
width: 170px;
padding: 10px 15px;
background: #c4bfac;
-moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
}
header nav ul li:hover ul {
display: block;
}
header nav ul li ul li {
float: none;
background: none;
padding: 0 5px;
}
header nav ul li ul li a {
font-size: 14px;
color: #fff;
display: block;
position: relative;
font-size: 14px;
height: auto;
padding: 4px 0;
-moz-text-shadow: 1px 1px 0 #8c8671;
-webkit-text-shadow: 1px 1px 0 #8c8671;
text-shadow: 1px 1px 0 #557904;
}
header nav ul li ul li:hover, header nav ul li ul li.nav-selected {
background: #b1aa91;
border-color: transparent #d0cdbe #d0cdbe transparent; }
Any insight would be awesome and appreciated! I'm originally using the rigidlite
theme and just trying to tweak it a bit but I'm having a bad case of tweaker nub
problems. my website ishttp://www.yaffeco.net
Had a look at this using Firebug and you are right; the color won't change if you amend the CSS. I am not 100% sure on this but it may have something to do with the fact that the theme you are using uses Cufon for font replacement.
It seems as though this is overwriting whatever you place in the CSS file even when you add !important to the declaration. You could maybe try disabling Cufon and see if that helps at all.
Andy
The Formigo Team
It seems as though this is overwriting whatever you place in the CSS file even when you add !important to the declaration. You could maybe try disabling Cufon and see if that helps at all.
Andy
The Formigo Team
If you are using Greek Yogurt, I seem to remember the theme will have specified a text colour with #main-content or something like that at the start of the rule, so the only way to override it is to use an id in your rule also.