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] highlight current menu item w/out highlighting children if parent is selecte


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

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Sep 24, 2011, 12:05 PM
tnandrick
 
43 posts · Nov 2010
[SOLVED] highlight current menu item w/out highlighting children if parent is selecte

Hi JD --

I've looked over your thread w/the menu cheat sheet (Awesome!)

What I would like to do is have the current menu item selected. My current CSS inserts:

Code:
#menu2 ul.rMenu li a:link, 
#menu2 ul.rMenu li a:visited,  
#menu2 ul.rMenu li a:active, 
#menu2 ul.rMenu li {
	background: #d20909 !important;
	color: #000000 !important;
}

#menu2 ul.rMenu li a:hover,
#menu2 ul.rMenu li.current-menu-item a  {
	background: #aa0707 !important;
	color: #f0f000 !important;
}
Yes, I am using the WP menu system, a mixed bag of categories, pages, and posts within the menu. The current CSS works great for a subpage of a menu item. However, if you select the "top-level/parent" menu item, all subpages are also highlighted. Is there a way around this?

Site: http://bit.ly/oVCv9q
ATA 3.6.7
WP 3.2.1

Thanks in advance
  #2  
Old Sep 24, 2011, 12:24 PM
tnandrick
 
43 posts · Nov 2010
Whoot!

After looking over some other posts (sometimes relevant info is hard to find until you post your own threads and the forum suggests other topics) here is the current CSS inserts that do what I wanted:

Code:
#menu2 ul.rMenu li a:link, 
#menu2 ul.rMenu li a:visited,  
#menu2 ul.rMenu li a:active, 
#menu2 ul.rMenu li {
	background: #d20909 !important;
	color: #000000 !important;
}

#menu2 ul.rMenu li a:hover,
#menu2 ul.rMenu li.current-menu-item a  {
	background: #aa0707 !important;
	color: #f0f000 !important;
}

#menu2 ul.rMenu li.current-menu-item ul li a {
	background: #d20909 !important;
	color: #000000 !important;
}

#menu2 ul.rMenu li.current-menu-item ul li a:hover {
	background: #aa0707 !important;
	color: #f0f000 !important;
}
Tim
  #3  
Old Sep 24, 2011, 12:52 PM
tnandrick
 
43 posts · Nov 2010
And FTW... (or "charge it to the game" for you Jay Mohr fans)

Code:
#menu2 ul.rMenu li a:link, 
#menu2 ul.rMenu li a:visited,  
#menu2 ul.rMenu li a:active, 
#menu2 ul.rMenu li {
	background: #d20909 !important;
	color: #000000 !important;
} /* base bg's and colors for everything except hover rules */

#menu2 ul.rMenu li a:hover {
	background: #aa0707 !important;
	color: #f0f000 !important;
} /* hover rules */

#menu2 ul.rMenu li.current-menu-item a  {
	background: #aa0707 !important;
	color: #eeeeee !important;
} /* special rule for the currently selected items */

#menu2 ul.rMenu li.current-menu-item ul li a {
	background: #d20909 !important;
	color: #000000 !important;
} /* special rule for children in case parent element is selected */

#menu2 ul.rMenu li.current-menu-item ul li a:hover {
	background: #aa0707 !important;
	color: #f0f000 !important;
} /* redo so that hover rules "stick" */
Tim

Last edited by tnandrick; Sep 24, 2011 at 01:05 PM. Reason: clean up the commenting so it's clean in "inserts"
  #4  
Old Sep 24, 2011, 01:41 PM
tnandrick
 
43 posts · Nov 2010
Last post about this, I swear...

Using the above code WILL make your little dropdown arrows disappear for the menus. If you would like to preserve these arrows, simply change "background" statements to "background-color", and all is well.

I know, should have tested before I posted everything and got so excited...
  #5  
Old Nov 8, 2013, 03:11 PM
dabeed
 
14 posts · Nov 2012
tnandrick, thank you, this is AWESOME. This was exactly what I was looking for, and didn't find, and then found by accident, while researching something else.

There's ONE tiny thing: I like to have the currently selected menu item be given the hover treatment, even when the user is not hovering, so it clearly shows the user which choice is "current." And I'm very new to CSS.

Would you know the line(s) that would do that?
  #6  
Old Nov 8, 2013, 11:24 PM
dabeed
 
14 posts · Nov 2012
Actually, re: my last comment, I see that that's what you were addressing with this part here:

Code:
#menu2 ul.rMenu li.current-menu-item a  {
	background: #aa0707 !important;
	color: #eeeeee !important;
} /* special rule for the currently selected items */
But for some reason it doesn't work for me. I'll keep experimenting!
WP 3.7.1
ATA 3.7.12

Bookmarks

Tags
css inserts, menu 2, selected links

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Lower case children and Bold current item deuxetoiles Sidebars & Widgets 10 Jun 13, 2011 11:30 AM
[SOLVED] Getting children to stay as children when parent is hidden SkeanDhude Page & Category Menu Bars 6 Jan 31, 2011 04:58 AM
Page menu: highlight a parent as current, even when on a subpage andd Page & Category Menu Bars 0 May 16, 2010 05:52 AM
category menu lists everything when item is selected. ramapoughnative Page & Category Menu Bars 3 Jul 21, 2009 03:44 AM
Color of children of current page in menu BradBrown Page & Category Menu Bars 0 Mar 22, 2009 02:38 PM


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


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