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 2 years, 10 months ago.

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


    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?




    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.



    Thanks, I am building my site here;:

    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;

    .sub-menu {text-align:left;}

    #subnav ul{

    #subnav li{
    #subnav ul a{



    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



    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.