Changing Navigation CSS

Community Forums Forums Design Tips and Tricks Changing Navigation CSS

This topic is: resolved

Tagged: ,

This topic contains 4 replies, has 3 voices, and was last updated by  Charlie 1 year, 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #25237

    smack
    Participant
    Post count: 10

    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;
    }

    #25245

    Charlie
    Participant
    Post count: 112

    So 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:

    [css]
    .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;
    }[/css]

    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.

    [css].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;
    }[/css]

    Hope this helps.

    #25248

    smack
    Participant
    Post count: 10

    Thanks :) All sorted out now

    #26915

    katehandling
    Participant
    Post count: 1

    can you help me change the color of the navigation bar in the news theme?

    #26917

    Charlie
    Participant
    Post count: 112

    Yup, that’s easy.

    So say you wanted to change it to the colour red:

    [css]
    #nav ul {
    background-color: red; //Add this line. Change red to whatever colour you desire (name or hex value).
    float: left;
    width: 100%;
    }[/css]

    To get to the style sheet, go to Appearance > Editor from the dashboard, then add the first line above.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.