Nav Bar: Current Page color with children/sub pages

[adaml44 1]

I thought I was done, and my site pulls me back in. A problem that had seemed to fix itself has popped back up, and I have no idea why. It's the same problem that Paulie had in this thread in January (http://www.pagelines.com/forum/discussion/4996/navigation-css-control/p1), but unfortunately the solution that worked for him is not working for me. The problem: I want the text of the currently selected page to be darker than the other buttons on the nav bar. While this works for child pages, and for pages with no children, when a parent page is selected, it AND all of its children page turn the selected color. So, for example, if you click "Alimony" or "About", only that button turns dark brown, but if you click "Divorce & Family", it and all pages in the drop down menu turn dark brown, making it more difficult to navigate within a subject matter. Here's the code controlling current page color (if you want all of my nav bar CSS, I'm going to need to learn to draw those yellow boxes in the comments, because there's a lot): #nav_row ul li.current_page_item a { background:#514338; } And as usual, the site is www.adamlillylaw.com

[Danny+ 1,327]

Hi Adam, Try adding this to your custom code, it should do the trick. [code] #nav_row ul li.current-menu-item a:active { background: #514338; } [/code]

[adaml44 1]

Hmm... trying that above the other line, below, and without it, it doesn't seem to change anything (without the other line, the current page didn't highlight at all). Any other ideas?

[Kate 3]

For the code boxes, you just put: [ code ] and [/ code ], without the spaces. For your CSS: what's happening is the declaration is applying to all of the children elements. So, you would have to do something like this: [code]#nav_row ul li.current_page_item a { background:#514338; } #nav_row ul li.current_page_item a li a { background:#ffffff; }[/code] [b]EDIT:[/b] I just took a look at your site... did you get this sorted out already?

[adaml44 1]

*sigh* No, it's still showing up for me. I feel like my site is displaying differently for computers at my house than elsewhere, even though I can make all sorts of changes pop up instantly (which I would think eliminates cache/refresh type concerns). For example, I just deleted what I had, and no pages get 'selected'. I added yours in, and the original problem persists. Just to be thorough, here's all my CSS (deleting most of the line breaks for space purposes): [code] body { padding-top: 0;} #sidebar_universal { text-align:center;} #feature { margin: 0;} #boxes .content-pad { padding: 0 0 0.5em;} div.wpcf7 { background-color: #FFFFFF;} #primary-nav { background: #846D5C;} #primary-nav li a {background: #846D5C;} #primary-nav #nav_row {border-bottom: 0px solid #846D5C;} #primary-nav .main-nav li a:hover{background: #514338;color:#FFFFFF;font-weight:lighter;} .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a{background: #846D5C;color: #846D5C;font-weight:lighter;} #primary-nav ul.sf-menu a, .sf-menu a:visited {color:#846D5C;font-weight:lighter;} #primary-nav ul.sf-menu li a {padding: 7px 15px;color:#FFFFFF;font-weight:lighter;} #primary-nav li a{font-size: .9em;} #nav_row ul li.current_page_item a { background:#514338; } #nav_row ul li.current_page_item a li a { background:#ffffff; } body div.branding_wrap {text-align: center;} #boxes h3 {text-align:center;} #branding .content-pad {padding: 10px 0 0 0px;} #boxes { text-align:justify;} #sidebar_universal {background:#846D5C;color:#FFFFFF;} #sidebar_universal {padding: 25px 0 0 0px;} #primary-nav ul.main-nav { margin-left:45px;} [/code] Any problems in there? By the way, thanks for the [ code ] thing.

[kastelic 6]

Change your line to this: [code] #nav_row ul li.current_page_item > a { background: #514338; } [/code] The ">" symbol tells CSS to only apply the rule to the "a" that is a direct descendant of the "li" , instead of all descendants down the line.

[adaml44 1]

Perfect. You're really good at this; thanks for helping people like me who aren't. If anyone is searching for an answer to this, to be perfectly clear, I replaced this: [code] #nav_row ul li.current_page_item a { background:#514338; } #nav_row ul li.current_page_item a li a { background:#ffffff; } [/code] with the block given by kastelic above.