Is there a way to make the parent page in the Page Menu highlighted when one of it's child pages is visited?

you can use a CSS Insert (ATO->add HTML/CSS Inserts->CSS Inserts) like this

/* ================================================ */
/* Here is how to change the child menu items       */
/* ================================================ */
li.current_page_item ul.rMenu-ver li a:link, 
li.current_page_item ul.rMenu-ver li a:active, 
li.current_page_item ul.rMenu-ver li a:visited, 
li.current_page_item ul.rMenu-ver li a:hover, 
li.current_page_item ul.rMenu-ver li,
li.current_page_item ul.rMenu-ver {
	background: #ffffff !important;
	color: #2912E7 !important;
}

Originally Posted by juggledad

you can use a CSS Insert (ATO->add HTML/CSS Inserts->CSS Inserts) like this

/* ================================================ */
/* Here is how to change the child menu items       */
/* ================================================ */
li.current_page_item ul.rMenu-ver li a:link, 
li.current_page_item ul.rMenu-ver li a:active, 
li.current_page_item ul.rMenu-ver li a:visited, 
li.current_page_item ul.rMenu-ver li a:hover, 
li.current_page_item ul.rMenu-ver li,
li.current_page_item ul.rMenu-ver {
	background: #ffffff !important;
	color: #2912E7 !important;
}

The comment in the code above says 'to change the child menu items' - before I try it, I want to confirm that we are talking about changing the PARENT <li> in the page menu, when a child page is visited.

sorry, copied the wrong code try this

/* ================================================ */
/* how to highlight parent of current page          */
/* ================================================ */
ul.rMenu li.current_page_parent a:link, 
ul.rMenu li.current_page_parent a:active, 
ul.rMenu li.current_page_parent a:hover, 
ul.rMenu li.current_page_parent a:visited, 
ul.rMenu li.current_page_parent {
background: #00ffff !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

Note if you have A the parent of B the parent of C and you are on page C, this will only highlight B, if you want A and B highlighted use current_page_ancestor instead of current_page_parent

This fixed my problem! Thanks a lot!

Originally Posted by juggledad

Note if you have A the parent of B the parent of C and you are on page C, this will only highlight B, if you want A and B highlighted use current_page_ancestor instead of current_page_parent

I've tried with current_page_ancestor, but it doesn't really work, because it highlights all the B items, so the user doesn't know where he is in the B sub-menu.
The selected elements of A and B have the current-menu-ancestor class, but sub-elements inherit the properties.

In WP 3.0+ with the new menus, try using 'current-menu-parent' in place of 'current_page_parent'

Hi Juggledad, I used the code and it's working, so it highlights the parent when child is active. But as said by Interfasys, it highlights all the sub-items then too, so a visitor doesn't know in which child he is.

I replaced 'current_page_parent' by 'current-menu-parent' but that doesn't highlight the parent anymore. Already a solution for that?

CSS is cascading style sheets so a change to an element effects it's children. To prevent this you have to add more CSS for the children to reset the change

thanks for that information!


robert

Thanks JD!

hi

i can't get current_page_parent to work on my site...

header:

<ul id="pagemenu">
<li <?php if (is_home()) { ?> class="current_page_item" <?php } ?>><a href="<?php echo get_option('home'); ?>/">Home</a></li>
<?php wp_list_pages('depth=1&sort_column=menu_order&titl e_li=' ); ?>
</ul>

sidebar:

<ul>

<?php wp_list_pages('include=19,21,23,25&title_li=') ; ?>

</ul>


Can someone help ??

Thanks a lot!

What version of atahualpa are you using?
What is the URL?

I just want to say that this code works great:

/* ================================================ */
/* how to highlight parent of current page          */
/* ================================================ */
ul.rMenu li.current_page_parent a:link, 
ul.rMenu li.current_page_parent a:active, 
ul.rMenu li.current_page_parent a:hover, 
ul.rMenu li.current_page_parent a:visited, 
ul.rMenu li.current_page_parent {
background: #00ffff !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

I placed it above the "clearfix hacks section" in the css.php file.. I am also using the horizontal menu children mod w/ the PHP Code widget that makes it possible to lay out a sub menu in a dropline format of excluded pages and it still highlights the parent page when those children are selected.. so thats awesome and now I want to figure out how to keep the children page selected when not hovering over it and on that page as well..

so i actually dont want to use a background color as the selection mode.. is there anyway to have it change the color of the text instead? i am only using a color change on the text its self in my menus and keeping the background color the same as the body background color..

sorry to bug n/m figured it out..

/* ================================================ */
/* how to highlight parent of current page          */
/* ================================================ */
ul.rMenu li.current_page_parent a:link, 
ul.rMenu li.current_page_parent a:active, 
ul.rMenu li.current_page_parent a:hover, 
ul.rMenu li.current_page_parent a:visited, 
ul.rMenu li.current_page_parent {
color: #00AFFE !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

this will just keep the font hover.. cool!

ok and just for fluidity I figured out how to make the PHP CODE widget change the color of the selected submenu page on my menu by adding simple font color code to each page that it is currently on

<?php

echo "<div id=\"menu2\">";
echo "<ul class=\"clearfix rMenu-hor rMenu\" id=\"rmenu\">";

$curr_page_id = get_query_var('page_id');

switch ($curr_page_id) {
    case 2:
        echo "
<li class=\"cat-item cat-item-1\"><a href=\"http://www.y-studios.com/wordpress/?page_id=11\">CATEGORY 01</a></li>
<li class=\"cat-item cat-item-1\"><a href=\"http://www.y-studios.com/wordpress/?page_id=43\">CATEGORY 02</a></li>
<li class=\"cat-item cat-item-1\"><a href=\"http://www.y-studios.com/wordpress/?page_id=45\">CATEGORY 03</a></li>
        ";
        break;

    case 11:
        echo "
<li class=\"cat-item cat-item-1\"><a href=\"http://www.y-studios.com/wordpress/?page_id=11\"><font color=\"#00AFFE\">CATEGORY 01</font></a></li>
<li class=\"cat-item cat-item-1\"><a href=\"http://www.y-studios.com/wordpress/?page_id=43\">CATEGORY 02</a></li>
<li class=\"cat-item cat-item-1\"><a href=\"http://www.y-studios.com/wordpress/?page_id=45\">CATEGORY 03</a></li>
        ";
        break;

    case 43:
        echo "
<li class=\"cat-item cat-item-1\"><a href=\"http://www.y-studios.com/wordpress/?page_id=11\">CATEGORY 01</a></li>
<li class=\"cat-item cat-item-1\"><a href=\"http://www.y-studios.com/wordpress/?page_id=43\"><font color=\"#00AFFE\">CATEGORY 02</font></a></li>
<li class=\"cat-item cat-item-1\"><a href=\"http://www.y-studios.com/wordpress/?page_id=45\">CATEGORY 03</a></li>
        ";
        break;

    case 45:
        echo "
<li class=\"cat-item cat-item-1\"><a href=\"http://www.y-studios.com/wordpress/?page_id=11\">CATEGORY 01</a></li>
<li class=\"cat-item cat-item-1\"><a href=\"http://www.y-studios.com/wordpress/?page_id=43\">CATEGORY 02</a></li>
<li class=\"cat-item cat-item-1\"><a href=\"http://www.y-studios.com/wordpress/?page_id=45\"><font color=\"#00AFFE\">CATEGORY 03</font></a></li>
        ";
        break;

    default:
       echo "&nbsp; ";
}
echo "</ul></div>";
?>

not the most efficient way to get a horizontal dropline menu but this works for my client..

i can't seem to get this working.

http://greeningmarketing.ca/2011/case-studies/ribfest/ is the child page.. i'd like the parent to be highlighted when the child is active, but don't want to use a dropdown menu. i used the code suggested above, but it doesn't seem to work for me, whether i have the dropdown in place or not.

WP 3.1.4
ATA 3.6.7

thank-you!

I'd suggest you use FireBug in FireFox to examine the menu items to see what classes are being used. It also depends on if you are using the Atahualpa menu or the WordPress menu
do you have the 367 patches applied? (New Versions & Updates forum)

I'm bringing this thread back from the dead. See here (scroll down to the Admin Login link and click it to bypass the construction splash screen)

http://www.ddubcustomsportswear.com/?page_id=22

I have inserted the parent code:

/* ================================================ */
/* how to highlight parent of current page          */
/* ================================================ */
ul.rMenu li.current-menu-parent a:link, 
ul.rMenu li.current-menu-parent a:active, 
ul.rMenu li.current-menu-parent a:hover, 
ul.rMenu li.current-menu-parent a:visited, 
ul.rMenu li.current-menu-parent {
color: #fff !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

I'm using Chrome's Element Inspect to view the CSS for the child menu items. I am able to manipulate other child elements (non-current) with ul.rMenu-ver but I can't seem to locate one specifically for the current item's child. When I inspect child elements, I see the items above.

I'm not too experienced with Clearfix, but would that do the trick? And if so, what's the proper way to implement it?

looks fine in Safari and FireFox on the mac, if I select 'Long sleeve Jerseys' then 'Products' is white

I should have been clearer -- I want the Parent to stay highlighted BUT the current sub-menu to use the default styling.

For example, the default styling for sub-menus is that links are blue, hover is red (see what happens when you mouse over Services).

Thus, when you are on Products > Accessories, Products stays highlighted in white but the sub-menu below it uses the default sub-menu styling -- links are blue, hover is red. Does that make sense?

When I inspect elements, everything is related to ul.rMenu -- I don't see specific items for the child of the current menu item. That's the hurdle I keep tripping on.

CSS is CASCADING - so if you want the sub menu items to be the same as the default, you must code more css to revert them to the original styling.

btw, a black background and dark blue menu items is very hard to read

Yeah, I'm not keen on the dark blue but it's what the client wants. The customer is always right, right?

I'm using Inspect Element to try and figure out WHAT I need to add to restore the default styling. I know what I want to use for link and hover, but I can't pinpoint the element itself when I look at the style sheet. It seems like the only elements listed are for the parent.

you need to use something like

ul.rMenu li.current-menu-parent ul li {......}