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, 10 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

    AC
    Blocked
    Post count: 7712

    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.

    #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.