Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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?


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #26  
Old Feb 23, 2012, 09:55 AM
bswb97
 
150 posts · Aug 2010
It's close, and thanks JD for the inclusion of the UL, I was stuck looking at the class. Here's my code:

HTML Code:
ul.rMenu li.current-menu-parent ul li a:link
{color: #204572 !important;}
ul.rMenu li.current-menu-parent ul li a:active
{color: #fff !important;}
ul.rMenu li.current-menu-parent ul li a:hover
{color: #DC2509 !important;}
ul.rMenu li.current-menu-parent ul li a:visited
{color: #204572 !important;}
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?
  #27  
Old Feb 23, 2012, 11:04 AM
juggledad's Avatar
juggledad
 
22,317 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
FireBug shows me you need
HTML Code:
div#menu1 ul.rMenu li.current-menu-item a:link, div#menu1 ul.rMenu li.current-menu-item a:active, div#menu1 ul.rMenu li.current-menu-item a:hover, div#menu1 ul.rMenu li.current-menu-item a:visited, div#menu1 ul.rMenu li.current_page_item a:link, div#menu1 ul.rMenu li.current_page_item a:active, div#menu1 ul.rMenu li.current_page_item a:hover, div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1 ul.rMenu li a:hover {
    color: red;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #28  
Old Feb 23, 2012, 06:31 PM
bswb97
 
150 posts · Aug 2010
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:

HTML Code:
ul.rMenu li.current-menu-parent ul li a:active {
    color: #FFFFFF !important;
}

ul.rMenu li.current-menu-parent ul li a:link, ul.rMenu li.current-menu-parent ul li a:visited {
    color: #204572 !important;
}
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?
  #29  
Old Feb 27, 2012, 10:01 AM
bswb97
 
150 posts · Aug 2010
Anyone? Or should I wave the white flag on this?
  #30  
Old Feb 27, 2012, 10:18 AM
lmilesw's Avatar
lmilesw
 
10,108 posts · Jul 2009
Central New York State USA
The brute force way would be to add the following in CSS Inserts.
HTML Code:
div#menu1 ul.rMenu li.current-menu-item a:link, div#menu1 ul.rMenu li.current-menu-item a:active, div#menu1 ul.rMenu li.current-menu-item a:hover, div#menu1 ul.rMenu li.current-menu-item a:visited, div#menu1 ul.rMenu li.current_page_item a:link, div#menu1 ul.rMenu li.current_page_item a:active, div#menu1 ul.rMenu li.current_page_item a:hover, div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1 ul.rMenu li a:hover {
    color: #fff !important;
}
Also I can barely read your menu items on my laptop... Not great for usability.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #31  
Old Feb 27, 2012, 12:42 PM
bswb97
 
150 posts · Aug 2010
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!
  #32  
Old Feb 27, 2012, 01:11 PM
lmilesw's Avatar
lmilesw
 
10,108 posts · Jul 2009
Central New York State USA
Did you try taking out the hover code? You may have to play with this code a bit.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #33  
Old Feb 27, 2012, 01:21 PM
bswb97
 
150 posts · Aug 2010
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.
  #34  
Old Feb 27, 2012, 01:23 PM
lmilesw's Avatar
lmilesw
 
10,108 posts · Jul 2009
Central New York State USA
This worked for me
HTML Code:
div#menu1 ul.rMenu li.current-menu-item a:link, div#menu1 ul.rMenu li.current-menu-item a:active, div#menu1 ul.rMenu li.current-menu-item a:visited, div#menu1 ul.rMenu li.current_page_item a:link, div#menu1 ul.rMenu li.current_page_item a:active, div#menu1 ul.rMenu li.current_page_item a:visited {
color: #ffffff !important;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #35  
Old Feb 27, 2012, 01:55 PM
bswb97
 
150 posts · Aug 2010
I tried it I think the issue here stems from the use of the Parent code (earlier in the thread):

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

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
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.
  #36  
Old Feb 27, 2012, 02:33 PM
lmilesw's Avatar
lmilesw
 
10,108 posts · Jul 2009
Central New York State USA
So maybe instead of the code I just gave you perhaps the following.
HTML Code:
div#menu1 ul.rMenu li.current_page_item a {
color: #fff !important;
}
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #37  
Old Feb 27, 2012, 03:48 PM
bswb97
 
150 posts · Aug 2010
THAT DID IT!!!

Or, more specifically, this combination of code:

1) Parent menu code:
HTML Code:
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;
}
2) Child menu code:
HTML Code:
ul.rMenu li.current-menu-parent ul li a:link, ul.rMenu li.current-menu-parent ul li a:visited
{color: #204572 !important;}
ul.rMenu li.current-menu-parent ul li a:active
{color: #fff;}
ul.rMenu li.current-menu-parent ul li a:hover
{color: #DC2509 !important;}
3) Active child menu code:
HTML Code:
div#menu1 ul.rMenu li.current_page_item a {
color: #fff !important;
}
You've earned my donation for the day!
  #38  
Old Mar 16, 2012, 09:55 PM
Harald
 
70 posts · Mar 2010
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.
HTML Code:
/* how to highlight parent of current page * * * * **/
/* ================================================ */
div#menu1 ul.rMenu li.current_page_parent a:visited {
background: -webkit-gradient(linear, left top, left bottom, from(#6D86BC), to(#D5DDEC)) !important;
background: -moz-linear-gradient(top,  #6D86BC,  #D5DDEC) !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6D86BC', endColorstr='#D5DDEC') !important;
color: #ffffff !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Adjustments for the menu bars, which in their default 
state have 1px borders plus -1px margins to avoid 1+1=2px 
borders between neighbor items. */
ul.rMenu-hor ul, ul.rMenu-hRight ul { margin-top: 0px; background: transparent;}
ul.rMenu-hor li { margin-bottom: 0px; margin-top: 0px; margin-left: 0px; background: transparent; }
ul.rMenu-hor { padding-left: 0px; background: transparent; }
ul.rMenu-ver li { margin-top: 0xp; background: transparent; }

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 9px 11px 6px 11px;
background:-webkit-gradient(linear, left top, left bottom, from(#D5DDEC), to(#ffffff)); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D5DDEC', endColorstr='#ffffff');
background: -moz-linear-gradient(top,  #D5DDEC,  #ffffff); 
-webkit-box-shadow: rgba(0,0,0,0.55) 0px 1px 1px; -moz-box-shadow: rgba(0,0,0,0.35) 0px 1px 1px;
-moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}
I use the latest Wordpress and Atahualpa.
Any suggestions?

Last edited by lmilesw; Mar 17, 2012 at 06:44 AM.
  #39  
Old Mar 17, 2012, 06:55 AM
lmilesw's Avatar
lmilesw
 
10,108 posts · Jul 2009
Central New York State USA
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?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #40  
Old Mar 17, 2012, 08:13 AM
Harald
 
70 posts · Mar 2010
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.
  #41  
Old Mar 17, 2012, 10:34 AM
lmilesw's Avatar
lmilesw
 
10,108 posts · Jul 2009
Central New York State USA
I would double check your selectors. How about this one?

.current_page_item a
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #42  
Old Mar 17, 2012, 03:26 PM
Harald
 
70 posts · Mar 2010
Tried to change the selector to your suggestion, but it did not work either. When I did that not even the text changed. So I guess the selector is correct since it at least changes the text. This is the site I am working on. This is one of the child pages http://frontline-leadership.com/wordpress/?page_id=122. I really appreciate all your help.
  #43  
Old Mar 17, 2012, 06:00 PM
juggledad's Avatar
juggledad
 
22,317 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Try changing
HTML Code:
/* ================================================ */
/* how to highlight parent of current page          */
/* ================================================ */
div#menu1 ul.rMenu li.current_page_parent a:visited {
to
HTML Code:
/* ================================================ */
/* how to highlight parent of current page          */
/* ================================================ */
div#menu1 ul.rMenu li.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
  #44  
Old Mar 17, 2012, 06:11 PM
Harald
 
70 posts · Mar 2010
Tried that Juggledad, but again then the white text disappears as well. So it looks like the selector does not work when I do that. The strange thing is that the gradient works for the default stage but not for the current page.
  #45  
Old Mar 17, 2012, 06:28 PM
lmilesw's Avatar
lmilesw
 
10,108 posts · Jul 2009
Central New York State USA
Without spending a bit of time to narrow this down you could "brute force" the color for the current menu item by using the following and changing the color to what you want for current and hover states.
HTML Code:
div#menu1 ul.rMenu li.current-menu-item a:link, div#menu1 ul.rMenu li.current-menu-item a:active, div#menu1 ul.rMenu li.current-menu-item a:hover, div#menu1 ul.rMenu li.current-menu-item a:visited, div#menu1 ul.rMenu li.current_page_item a:link, div#menu1 ul.rMenu li.current_page_item a:active, div#menu1 ul.rMenu li.current_page_item a:hover, div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1 ul.rMenu li a:hover {
    color: red !important;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #46  
Old Mar 17, 2012, 06:48 PM
Harald
 
70 posts · Mar 2010
lmilesw it worked so far as that the current page has the right darker gradient background I want in the menu, but not when I am on the child page. Before the background did not work for childpages in the menu, but the text. Now it does not indicate in the menu at all what the prarent is. Any idea?
  #47  
Old Mar 17, 2012, 07:02 PM
Harald
 
70 posts · Mar 2010
I got it to work. When I added div#menu1 ul.rMenu li.current_page_parent a:visited, to the code you gave me and it worked.

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 04:40 PM.


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