Community Forums › Forums › Archived Forums › Design Tips and Tricks › Changing Navigation CSS
Tagged: css, navigation
- This topic has 4 replies, 3 voices, and was last updated 11 years, 1 month ago by Charlie.
-
AuthorPosts
-
March 9, 2013 at 7:39 pm #25237ShaneBlackMember
Hi All,
I'm trying to change the CSS of the navigation but it's linked in with #header content which I don't want to change, so I need to know how to separate these. You can view the site <a href="http://www.shanemackintosh.com">here</a>.
I've changed the background image for the navigation and now need to change the standard, hover, active etc. text color without affecting the header menu.
Any help on what to change in the CSS would be greatly appreciated. Thanks
/* Header / Primary / Secondary Navigation
------------------------------------------------------------ */
.menu-primary,
.menu-secondary,
#header .menu {
clear: both;
color: #999;
font-size: 13px;
margin: 0 auto;
overflow: hidden;
width: 100%;
}#header .menu {
float: right;
width: auto;
}.menu-primary,
.menu-secondary {
background: url(images/nav2.png);
margin: 0 0 5px;
}.menu-primary ul,
.menu-secondary ul,
#header .menu ul {
float: left;
width: 100%;
}.menu-primary li,
.menu-secondary li,
#header .menu li {
float: left;
list-style-type: none;
}.menu-primary a,
.menu-secondary a,
#header .menu a {
color: #999;
display: block;
padding: 9px 15px;
position: relative;
text-decoration: none;
}.menu-primary li a:active,
.menu-primary li a:hover,
.menu-primary .current_page_item a,
.menu-primary .current-cat a,
.menu-primary .current-menu-item a,
.menu-secondary li a:active,
.menu-secondary li a:hover,
.menu-secondary .current_page_item a,
.menu-secondary .current-cat a,
.menu-secondary .current-menu-item a,
#header .menu li a:active,
#header .menu li a:hover,
#header .menu .current_page_item a,
#header .menu .current-cat a,
#header .menu .current-menu-item a {
color: #fff;
}.menu-primary li li a,
.menu-primary li li a:link,
.menu-primary li li a:visited,
.menu-secondary li li a,
.menu-secondary li li a:link,
.menu-secondary li li a:visited,
#header .menu li li a,
#header .menu li li a:link,
#header .menu li li a:visited {
background: none;
background-color: #111;
border: 1px solid #222;
border-top: none;
color: #999;
font-size: 12px;
padding: 9px 15px 8px;
position: relative;
text-transform: none;
width: 128px;
}.menu-primary li li a:active,
.menu-primary li li a:hover,
.menu-secondary li li a:active,
.menu-secondary li li a:hover,
#header .menu li li a:active,
#header .menu li li a:hover {
color: #fff;
}.menu-primary li ul,
.menu-secondary li ul,
#header .menu li ul {
height: auto;
left: -9999px;
margin: 0 0 0 -1px;
position: absolute;
width: 160px;
z-index: 9999;
}.menu-primary li ul a,
.menu-secondary li ul a,
#header .menu li ul a {
width: 140px;
}.menu-primary li ul ul,
.menu-secondary li ul ul,
#header .menu li ul ul {
margin: -37px 0 0 159px;
}.menu li:hover ul ul,
.menu li.sfHover ul ul {
left: -9999px;
}.menu li:hover,
.menu li.sfHover {
position: static;
}ul.menu li:hover>ul,
ul.menu li.sfHover ul,
#header .menu li:hover>ul,
#header .menu li.sfHover ul {
left: auto;
}.menu li a .sf-sub-indicator,
.menu li li a .sf-sub-indicator,
.menu li li li a .sf-sub-indicator {
position: absolute;
text-indent: -9999px;
}#wpadminbar li:hover ul ul {
left: 0;
}March 9, 2013 at 8:24 pm #25245CharlieMemberSo all you have to do is separate out the styles for the primary and secondary menus. Let's start off by looking at this bit of code:
.menu-primary li a:active, .menu-primary li a:hover, .menu-primary .current_page_item a, .menu-primary .current-cat a, .menu-primary .current-menu-item a, .menu-secondary li a:active, .menu-secondary li a:hover, .menu-secondary .current_page_item a, .menu-secondary .current-cat a, .menu-secondary .current-menu-item a, #header .menu li a:active, #header .menu li a:hover, #header .menu .current_page_item a, #header .menu .current-cat a, #header .menu .current-menu-item a { color: #fff; }
Cut the menu-seconday references out and paste them somewhere else in your stylesheet, then give them the colour values you want. Let's say you want to make them black when active or being hovered over.
.menu-secondary li a:active, .menu-secondary li a:hover, .menu-secondary .current_page_item a, .menu-secondary .current-cat a, .menu-secondary .current-menu-item a { color: #000; }
Hope this helps.
March 9, 2013 at 8:51 pm #25248ShaneBlackMemberThanks 🙂 All sorted out now
March 14, 2013 at 5:56 pm #26915katehandlingMembercan you help me change the color of the navigation bar in the news theme?
March 14, 2013 at 6:07 pm #26917CharlieMemberYup, that's easy.
So say you wanted to change it to the colour red:
#nav ul { background-color: red; //Add this line. Change red to whatever colour you desire (name or hex value). float: left; width: 100%; }
To get to the style sheet, go to Appearance > Editor from the dashboard, then add the first line above.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.