Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
If the asker does not get an answer then they have 10 days to request a refund.
$4
How to change color/font of drop down menu under "Services"
#nav-cat li li a, #nav-cat li li a:visited {
color:#d8d8d8 !important;
text-transform:none;
}
This question has been answered.
hokulani | 08/30/10 at 7:30am
Edit
(9) Possible Answers Submitted...
See a chronological view of answers?
Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
-
Last edited:
08/30/10
9:58amMattias says:I think you need something like
#nav-cat li ul #children {
color:#d8d8d8 !important;
text-transform:none;
}
The class for the dropdown is #children anyway. -
Last edited:
10/10/10
9:22amAndrew Petrusha says:Hi. If you can edit nav.css than you should:
1 find rule
#nav-cat li ul {
and comment
border-bottom:1px solid #424242 !important;
border-right:1px solid #424242 !important;
2. find rule
#nav-cat li li
and replace
background: #777;
border-bottom:1px solid #848484;
to
background: #7DA939;
border-bottom:1px solid #83A8B9;
3. find
#nav-cat li li a, #nav-cat li li a:visited
and replace
color:#dadada !important;
to
color:#d8d8d8 !important;
4. in rule #nav-cat li li a, #nav-cat li li a:visited... comment
font:0.8em Georgia, "Times New Roman", Times, serif !important;
-
Last edited:
10/10/10
9:22amKaavs says:#children is your class for the drop down menu , here's the steps how you can change it. In your CSS file, first find your theme's reference for "dropdown-menu".
First of all, we define top-bottom (5px) and right-left (15px) padding values. And we set color to white (#ffff).
.dropdown-menu ul.dropdown li a {
padding: 5px 15px;
font-size: 1em;
color: #ffff; }
Now let’s define the mouse over style for the links:
.dropdown-menu ul.dropdown li a:hover {
font-style: italic;
background-color: #fff;
color: #333; }
This rule defines that when we move mouse over (hover) a link (< a > element in html) it will have white (#fff) background color and text will be a dark gray (#333). Text will become italic also.
The following is to add dropdown menu's background:
.dropdown-menu ul.dropdown li ul{ width:auto; background: #333; background: url(images/opacity.png);
border-radius: 4px;
}
This defines background for the dropdown menu’s when you move over a link. Here we set it to have a gray(#333) background. Then we put a background image to it(this you should upload the image in the images folder and call it opacity.png). Transparent pixels don’t work in older Internet Explorer browsers.
If you want current page or category seem different than other links add following:
.dropdown-menu ul.dropdown li.current_page_item>a,
.dropdown-menu ul.dropdown li.current-cat>a,
.dropdown-menu ul.dropdown li.current-cat>a:hover,
.dropdown-menu ul.dropdown li.current_page_item>a:hover{
color: #333;
background: white; }
This will make your current page/category have a white background with dark gray text.
Hope the above helps in changing your dropdown menu the way you want to.
Cheers,
Kaavs -
Last edited:
10/10/10
9:22amNilesh shiragave says:You can change by adding this code in your theme's style.css file
#nav-cat li ul li a{
color:#d8d8d8 !important;
text-transform:none;
}
-
Last edited:
10/10/10
9:22amEhthisham tk says:open
/wp-content/themes/vintagegreen/style.css
to change font-color
goto line :90
#nav-cat li li a, #nav-cat li li a:visited {
color:#000000 !important;
}
to change font family and menu background
goto ~/themes/mimbo/css/nav.css
and add the following lines after line number:226
#nav-cat li li a, #nav-cat li li a:visited {
color:#000000 !important;
font-family:verdana;
background:#fff;
}
and in line 214 change the background color
#nav-cat li li {
background:#fff;
}
-
Last edited:
08/31/10
12:12pmMykyta Savchenko says:open /wp-content/themes/mimbo/css/nav.css
and replace those strings where i left comments:
#nav-cat li li {
background:none repeat scroll 0 0 #777777; /*this is background*/
border-bottom:1px solid #848484;
border-right:medium none;
height:auto;
letter-spacing:0.06em;
margin:0;
padding:4px 0 !important;
width:178px;
z-index:1000;
}
#nav-cat li li a, #nav-cat li li a:visited, #nav-cat li.current_page_item li a, #nav-cat li.current_page_item li a:visited {
background:#777777 !important; /*this is also background*/
border:medium none;
color:#DADADA !important;
font:0.8em Arial,"Helvetica Neue",Arial,serif !important; /*this is font*/
padding:5px 12px !important;
text-transform:none;
}
-
Last edited:
08/31/10
12:34pmMatteo Santiloni says:Hi there, this works. Simply change the nav.css with this code (I've just added a couple of lines to your original code).
/*Top Page Navbar */
#nav, #nav * {
list-style: none;
z-index:1;
line-height: 1.0;
}
#nav li {
float: left;
list-style:none;
color:#3f4a4f;
margin-right:10px;
position:relative
}
#nav a:lnk, #nav a:visited {
display: block;
text-decoration: none;
border:none;
color:#797976;
padding:7px 22px;
font:bold 0.75em Arial,Verdana;
letter-spacing:0.07em;
}
#nav a:hover {
text-decoration:none;
color:#292928;
}
#nav a:active {
background:#f2f0eb;
color:#6b6b68;
}
#nav li.current_page_item a, #nav li.current_page_item a:visited {
background:#FFF;
color:#292928;
}
/* Dropdown Menus */
#nav li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
#nav li:hover ul,
#nav li.sfhover ul {
left: 7px;
}
ul#nav li:hover li ul,
ul#nav li.sfhover li ul {
top: -999em;
}
ul#nav li li:hover ul,
ul#nav li li.sfhover ul {
left: 178px; /* match ul width */
top: 0;
}
ul#nav li li:hover li ul,
ul#nav li li.sfhover li ul {
top: -999em;
}
ul#nav li li li:hover ul,
ul#nav li li li.sfhover ul {
left: 178px; /* match ul width */
top: 0;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 178px;
z-index:1 !important;
line-height:1;
-moz-opacity:.98;
opacity:.98;
margin:0 0 0 11px;
border-right:1px solid #424242 !important;
border-bottom:1px solid #424242 !important;
}
#nav li li {
width: 178px;
background: #777;
z-index:1000;
height:auto;
padding:4px 0;
letter-spacing: 0.06em;
border-bottom:1px solid #848484;
}
#nav li li a, #nav li li a:visited,
#nav li.current_page_parent li.current_page_item a, #nav li.current_page_parent li.current_page_item a:visited {
color:#dadada !important;
background: #777 !important;
text-transform:uppercase;
font:0.6em Georgia, "Times New Roman", Times, serif !important;
padding:5px 12px !important;
}
#nav li li a:hover, #nav li li a:active,
#nav li.current_page_parent li.current_page_item a:hover, #nav li.current_page_parent li.current_page_item a:active {
color:#FFF !important;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav ul ul {
margin:0 0 0 -4px !important
}
/*Category Nav*/
#nav-cat {
line-height: 1.0;
position:relative;
margin:0 auto;
background:#607b88;
padding:6px 0 6px 15px;
border-top:1px solid #83a8b9;
}
#nav-cat li {
float:left;
list-style:none;
padding:0 25px 0 13px !important;
border-right:1px dotted #83a8b9;
margin-right:25px;
position:relative;
}
#nav-cat a, #nav-cat a:visited {
display:block;
font:bold 1em Arial,Verdana;
text-decoration: none;
letter-spacing:0.07em;
padding-bottom:3px;
color:#c6dce6;
}
#nav-cat a:hover, #nav-cat li.current-cat a, #nav-cat li.current-cat a:visited {
text-decoration:none;
color:#FFF
}
#nav-cat a:active {
color:#c6dce6;
}
/*Category Nav Dropdowns*/
#nav-cat li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
#nav-cat li:hover ul,
#nav-cat li.sfhover ul {
left: 7px;
top: 15px; /* match top ul list item height */
}
ul#nav-cat li:hover li ul,
ul#nav-cat li.sfhover li ul {
top: -999em;
}
ul#nav-cat li li:hover ul,
ul#nav-cat li li.sfhover ul {
left: 178px; /* match ul width */
top: 0;
}
ul#nav-cat li li:hover li ul,
ul#nav-cat li li.sfhover li ul {
top: -999em;
}
ul#nav-cat li li li:hover ul,
ul#nav-cat li li li.sfhover ul {
left: 178px; /* match ul width */
top: 0;
}
#nav-cat li ul {
position: absolute;
left: -999em;
height: auto;
width: 178px;
z-index:1;
line-height:1;
-moz-opacity:.90;
opacity:.90;
border-right:1px solid #424242 !important;
border-bottom:1px solid #424242 !important;
/* new */
background-color: #000000;
}
#nav-cat li li {
width: 178px;
z-index:1000;
height:auto;
padding:4px 0 !important;
margin:0;
letter-spacing: 0.06em;
border-right:none;
border-bottom:1px solid #848484;
/* new */
background-color: #000000;
}
#nav-cat li li a, #nav-cat li li a:visited,
#nav-cat li.current_page_item li a, #nav-cat li.current_page_item li a:visited {
border:none;
padding:4px 12px;
text-transform:none;
font:0.8em Arial, "Helvetica Neue", Arial, serif !important;
padding:5px 12px !important;
background-color: #000000;
}
#nav-cat li li a:hover, #nav-cat li li a:active,
#nav-cat li.current_page_item li a:hover, #nav-cat li.current_page_item li a:active {
color:#FFF !important;
border:none
}
#nav-cat li:hover ul, #nav-cat li li:hover ul, #nav-cat li li li:hover ul, #nav-cat li.sfhover ul,
#nav-cat li li.sfhover ul, #nav-cat li li li.sfhover ul {
left: auto;
}
/* new */
#nav-cat li li a, #nav-cat li li a:visited {
color:#FFFF00 !important;
} -
Last edited:
08/31/10
2:47pm -
Last edited:
08/31/10
3:33pmvipul jariwala says:Hi, I think the answer may be
Add new class at bottom of style.css:
#nav-cat li ul.children li a, #nav-cat li ul.children li a:visited {
color:#d8d8d8 !important;
font-family:Helvetica Neue,Arial,sans-serif;
}
or change in classs:
#nav-cat li li a, #nav-cat li li a:visited {
color:#D8D8D8 !important;
}
Thanks
Previous versions of this answer: 08/31/10 at 3:31pm | 08/31/10 at 3:32pm | 08/31/10 at 3:33pm
This question has expired.
Current status of this question: Completed
Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
If the asker does not get an answer then they have 10 days to request a refund.