Nav menu item styling when active submenu item

[Joyann]

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?

 

[AnitaC]

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.

---

Need help with customization or troubleshooting? Reach out to me.

[Joyann]

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

[And_or]

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

[Joyann]

Thanks ALOT 🙂 Simple but very well hidden code-snippet.....

[Author]

Posts