Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   [SOLVED] highlight current menu item w/out highlighting children if parent is selecte (http://forum.bytesforall.com/showthread.php?t=15487)

tnandrick Sep 24, 2011 12:05 PM

[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

tnandrick Sep 24, 2011 12:24 PM

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

tnandrick Sep 24, 2011 12:52 PM

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

tnandrick Sep 24, 2011 01:41 PM

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

dabeed Nov 8, 2013 03:11 PM

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?

dabeed Nov 8, 2013 11:24 PM

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

dabeed Nov 9, 2013 08:24 AM

Ok I fixed this on my end by repeating the appropriate snippet from css.php, swapping out the php for the actual colors, and adding !important:

Code:

/* "current" page and hover, first part old version */
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 {
    background-color: #04644B !important;
    color: #FFFFFF !important;
    }

Thanks again! :)


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

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