[SOLVED] Is it possible to keep the PARENT page highlighted in the menu?
 

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

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
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!

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

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:

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

It's close, and thanks JD for the inclusion of the UL, I was stuck looking at the class. Here's my code:

It's halfway there. You can look at http://www.ddubcustomsportswear.com/?page_id=25 (remember the splash page bypass at the bottom) and see that the red hover is working EXCEPT on the first three items. The main links are now blue, which is good, but the active is not turning white.

So it should be:

Link & visited: Blue
Active: White
Hover: Red

Am I just not seeing a typo here?

FireBug shows me you need

This continues to frustrate me. I've got it now where it has:

CORRECT:
Parent item (white on current)
Inactive child links (blue)
Hover child links (red)

INCORRECT:
Active child page -- blue, should be white

I went to Firebug instead of Chrome Element. They're formatted a little differently, so they could be displaying the same info. In any case, I searched for the blue code #204572. This is what I see:

I think the Blue for link/visited is overriding the white for active. When I put them at equal importance, it shows that the blue wins out. If I swap the order of them, it shows up as whichever comes latest. If I remove the important from either one, the one marked important shows up on all elements except hover.

Makes sense to me from the way CSS is structured, but is there a way to get the Active Child page to show up as a different color from the links/visited links/hover?

Anyone? Or should I wave the white flag on this?

The brute force way would be to add the following in CSS Inserts.
Also I can barely read your menu items on my laptop... Not great for usability.

Close but no cigar. This creates a white hover state instead of the red. I tried removing the hover elements and that just created the scenario I previously described.

I think I'm giving up on this one. Any recommendations on a CSS-friendly menu plugin?

Re: color scheme...it's what the site owner wanted. I originally designed it as a light gray but he wanted the blue to go with the logo. Sometimes you can explain and explain but they're hell-bent on their decisions! ;)

Did you try taking out the hover code? You may have to play with this code a bit.

Yeah, I tried removing the hover elements. Tried also overriding them with different placement in the inserts, and a few other variations but it ultimately reproduced the same effects that I got before.

I'll try going the other route with a plugin, so recommendations are welcome.

This worked for me

I tried it I think the issue here stems from the use of the Parent code (earlier in the thread):

If I put in your code WITH this code, then the result turns everything white. I think it supersedes the CSS defaults (blue links, red hover). That's what I have saved right now, you can check it out.

If, however, I remove the parent code, then everything fits into place EXCEPT the parent item. For example, the active child is white, the other child links are blue, the hover links are red. It's essentially the CSS default.

My original configuration had the Parent code (above) and the following three items that I have currently removed:

1) Blue colors on links:
ul.rMenu li.current-menu-parent ul li a:link, ul.rMenu li.current-menu-parent ul li a:visited
{color: #204572 !important;}

2) White on active link (NOT WORKING)
ul.rMenu li.current-menu-parent ul li a:active
{color: #fff;}

3) Red on hover:
ul.rMenu li.current-menu-parent ul li a:hover
{color: #DC2509 !important;}

The final variation I tried was the Parent code + your code except I altered the parent code to get rid of the link, hover, and visited states. This failed to activate the Parent as white.

So maybe instead of the code I just gave you perhaps the following.
This is where I play with Firebug to determine what works. There is somtimes so much CSS interaction it is next to impossible to give you the exact code.

THAT DID IT!!!

Or, more specifically, this combination of code:

1) Parent menu code:
2) Child menu code:
3) Active child menu code:
You've earned my donation for the day!

I used the code above to highlight the parent menu when on a child page, and it worked except when I try to make the background gradient. The text still changes but not the background. This is the CSS i used in the CSS Insert section.
I use the latest Wordpress and Atahualpa.
Any suggestions?

I would double check your gradient CSS. That can be a bit finicky. For instance I have never seen from and to in CSS. Where did you get this code?

Thanks for your quick response. I found it on this site http://webdesignerwall.com/tutorials...r-css-gradient. The strange thing is that the code works in default stage but not in current stage.