Nav menu item styling when active submenu item

Community Forums Forums Design Tips and Tricks Nav menu item styling when active submenu item

This topic is: resolved

Tagged: , ,

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

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

    Joyann
    Participant
    Post count: 2

    I am using the Lifestyle child theme.

    I am looking for the right css style to add background color to the current menu item on all related active submenu items. To make it easy to see where I am in relation to current top navigation item. Meaning if the about page is subpage under contact, I want background color on contact menu item when visiting the about page.

    How can I do that in my css?

     

    #6946

    anitac
    Participant
    Post count: 6489

    Please provide a link to your site so we can take a look. In the meantime, you can use Firebug for Firefox to locate those areas which would be modified in your Style.css file.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #6972

    Joyann
    Participant
    Post count: 2

    Thanks, I am building my site here;: http://lbh.fengshuiwebdesign.dk/

    My subnav css is this – and this is where I´m not sure where to change something:

    #subnav {
    background-color: #F5F5F5;
    /*border-bottom: 1px solid #ddd;*/
    clear: both;
    color: #fff;
    font-family: ‘Bilbo Swash Caps’, cursive;
    font-size: 16px;
    padding: 5px 0;
    margin: 5px 2px 0 auto;
    overflow: hidden;
    width: 1000px;
    word-spacing: 2px;
    }

    #subnav ul {
    float: left;
    width: 100%;
    }

    #subnav li {
    float: left;
    list-style-type: none;
    }

    #subnav li a,
    #subnav li a:link {
    /*border-right: 1px solid #ddd;*/
    /*border-left:1px solid #fff;*/
    -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
    background-color: #FFF;
    color: #583e65;
    display: block;
    margin: 0 2px;
    padding: 6px 16px 5px 15px;
    position: relative;
    text-decoration: none;
    }

    #subnav li a:hover,
    #subnav li a:hover a:active,
    #subnav .current_page_item a,
    #subnav .current-cat a,
    #subnav .current-menu-item a {
    background-color: #583e65;
    color: #FFF;
    }

    #subnav li a .sf-sub-indicator {
    display: block;
    overflow: hidden;
    position: absolute;
    text-indent: -9999px;
    }

    #subnav li li a,
    #subnav li li a:link,
    #subnav li li a:visited {
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-width: 0;
    color: #444;
    font-size: 12px;
    padding: 5px 10px;
    position: relative;
    text-transform: none;
    width: 128px;
    }

    #subnav li li a:hover,
    #subnav li li a:active {

    background-color: #583e65;
    color: #FFF;
    }

    #subnav li ul {
    height: auto;
    left: -9999px;
    margin: 0 0 0 -1px;
    position: absolute;
    width: 180px;
    z-index: 9999;
    }

    #subnav li ul a {
    width: 130px;
    }

    #subnav li ul ul {
    margin: -31px 0 0 149px;
    }

    #subnav li:hover>ul,
    #subnav li.sfHover ul {
    left: auto;
    }

    #subnav .wrap {
    margin-left: auto;
    margin-right: auto;
    display:table;
    white-space:nowrap;
    }

    #subnav{text-align:center}
    .sub-menu {text-align:left;}

    #subnav ul{
    list-style:none;
    display:table-row;
    white-space:nowrap;
    }

    #subnav li{
    display:table-cell;
    }
    #subnav ul a{
    display:block;
    }

    #11321

    And_or
    Participant
    Post count: 42

    Hi Joyann, I think the code you are looking for is: #subnav .current-page-ancestor a which needs to be added to the styles on line 549 of the stylesheet on the link you provide.

    so added to this line: #subnav li a:hover, #subnav li a:hover a:active, #subnav .current_page_item a, #subnav .current-cat a, #subnav .current-menu-item a (add  , #subnav .current-page-ancestor a)


    Simplicity is not Simple Webtaurus

    #11775

    Joyann
    Participant
    Post count: 2

    Thanks ALOT :-) Simple but very well hidden code-snippet…..

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

The topic ‘Nav menu item styling when active submenu item’ is closed to new replies.