Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

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


  #1  
Old Dec 4, 2009, 02:58 PM
qda
 
10 posts · Dec 2009
Is there a way to make the parent page in the Page Menu highlighted when one of it's child pages is visited?
  #2  
Old Dec 5, 2009, 06:34 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
you can use a CSS Insert (ATO->add HTML/CSS Inserts->CSS Inserts) like this
HTML Code:
/* ================================================ */
/* 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;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Dec 6, 2009, 02:45 PM
qda
 
10 posts · Dec 2009
Quote:
Originally Posted by juggledad
you can use a CSS Insert (ATO->add HTML/CSS Inserts->CSS Inserts) like this
HTML Code:
/* ================================================ */
/* 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.
  #4  
Old Dec 6, 2009, 09:24 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
sorry, copied the wrong code try this
HTML Code:
/* ================================================ */
/* 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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Jan 29, 2010, 08:24 AM
vonspark
 
1 posts · Jan 2010
Bergen, Norway
This fixed my problem! Thanks a lot!
  #6  
Old Aug 7, 2010, 12:10 PM
interfasys
 
46 posts · Aug 2010
Switzerland
Quote:
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.
  #7  
Old Aug 7, 2010, 12:55 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
In WP 3.0+ with the new menus, try using 'current-menu-parent' in place of 'current_page_parent'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Dec 5, 2010, 06:59 AM
marced
 
60 posts · Feb 2010
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?
  #9  
Old Dec 5, 2010, 10:29 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Dec 9, 2010, 08:17 AM
rlenz's Avatar
rlenz
 
12 posts · Jun 2010
thanks for that information!


robert
  #11  
Old Dec 11, 2010, 05:45 AM
marced
 
60 posts · Feb 2010
Thanks JD!
  #12  
Old Jan 26, 2011, 04:33 PM
mindblower
 
1 posts · Jan 2011
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!
  #13  
Old Jan 26, 2011, 05:23 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
What version of atahualpa are you using?
What is the URL?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #14  
Old Mar 18, 2011, 03:24 PM
cafemag
 
8 posts · Mar 2011
I just want to say that this code works great:
Code:
/* ================================================ */
/* 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..
  #15  
Old Mar 18, 2011, 03:40 PM
cafemag
 
8 posts · Mar 2011
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..
  #16  
Old Mar 18, 2011, 03:42 PM
cafemag
 
8 posts · Mar 2011
sorry to bug n/m figured it out..
Code:
/* ================================================ */
/* 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!
  #17  
Old Mar 18, 2011, 04:19 PM
cafemag
 
8 posts · Mar 2011
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

Code:
<?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..
  #18  
Old Jul 22, 2011, 11:01 AM
striped aardvark
 
50 posts · Mar 2010
dundas, ontario, canada
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!
  #19  
Old Jul 22, 2011, 04:31 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #20  
Old Feb 21, 2012, 09:39 PM
bswb97
 
155 posts · Aug 2010
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:

HTML 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?
  #21  
Old Feb 22, 2012, 06:01 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
looks fine in Safari and FireFox on the mac, if I select 'Long sleeve Jerseys' then 'Products' is white
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #22  
Old Feb 22, 2012, 09:11 AM
bswb97
 
155 posts · Aug 2010
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.
  #23  
Old Feb 22, 2012, 09:35 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by lmilesw; Feb 22, 2012 at 09:41 AM.
  #24  
Old Feb 22, 2012, 10:03 AM
bswb97
 
155 posts · Aug 2010
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.
  #25  
Old Feb 22, 2012, 04:58 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
you need to use something like
HTML Code:
ul.rMenu li.current-menu-parent ul li {......}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to remove parent slug from child page's permalink? Tarzanna77 Page & Category Menu Bars 9 Aug 21, 2010 02:45 PM
Subpages are all highlighted when parent page is selected on page menu bar danielphenry Page & Category Menu Bars 9 Feb 27, 2010 02:34 AM
Child pages don't keep parent page in menu highlighted ribbu Page & Category Menu Bars 12 Dec 15, 2009 01:43 PM
How do I hide a parent page in the top navigation bar freyakat Page & Category Menu Bars 1 Aug 26, 2009 07:29 PM
disable links in category menu for parent categories (only childless categories link) qcook2000 Page & Category Menu Bars 0 May 15, 2009 10:09 PM


All times are GMT -6. The time now is 02:02 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.