Navbar Customizations

[brempfer 0]

In order to help visitors maintain a sense of where they are in a monochrome colored site (client preference) I would like to maintain a persistent highlight of the area that they are exploring as indicated by the main headings in the navbar. The following css works fine for a top menu level item, but if pages or posts menued below that are selected, the highlight on the main menu heading goes away.

.navbar .navline > li.current-menu-item > a{

background-color: rgba(80,88, 189, 0.8);

color: #FFFFFF;

text-decoration: none;

}

Any insight on what is probably obvious would be greatly appreciated.

[catrina 103]

You'll need to add a more specific selector to the CSS to ensure that the main menu item remains highlighted when the subpage is selected. Are you already using Firebug?

[brempfer 0]

Yup, sure do. As I understand it, each menu item has a specific selector, such as

<li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-73">

will modifying the sub menu items modify the main menu item?

[Rob 547]

Actually, no. There should be a unique class created for the upper level (parent) as well as the child menu items.

[brempfer 0]

OK

Sorry to be so long getting back - client is happy with most all. So I revisit this.

Used tweks

/* CSS FOR ACTIVE MENU ITEM, USEFUL FOR DROP DOWN MENUS */

.main-nav li.current-page-ancestor a:active,

.main-nav li.current_page_item a:active,

.main-nav li.current-page-ancestor ul a:active,

.main-nav li.current_page_item ul a:active { background-color: #FF0000; color: #FFFFFF; }

And it works fine for single level selected menu items such as "home" leaving a nice highlight when that is the selected page, but why doesn't the ...ancestor ul a:active take care of that menu item being highlighted when one of the dropdown items is selected?

[James B 436]

The drop downs have their own class and css. If you look in firebug/google dev tools you should see it on one of the drop downs coming up like body .dropdown-menu. You'll need to apply css to those selectors as well as the main nav.

[brempfer 0]

Thanks much for your patient responses. I can change the dropdown background colors in the dropdown menus using

body .dropdown-menu a {

clear: both;

color: #cc00ff;

background-color:#00ff33;

display: block;

font-weight: normal;}

easily enough.

The problem (I think) is that perhaps I am being obtuse or not asking the question clearly enough.

I have found a bit about dynamic menu highlighting in the WordPress Codex, but it all seems to be for highlighting categories of posts (and of course pages dont have those).

Let me take another swing at the question: Within the main menu there is a menu item called 'Products' (not linked anywhere) and below it there are three pages.

What I am trying to do is modify the CSS so that if ANY of the three is selected the word PRODUCTS would remain highlighted AFTER the page is selected thereby indicating visually to the user that they are in the PRODUCTS section.

I am beginning to wonder if I am not asking a child to modify its parent and that doesn't seem to be in the realm of CSS

Thanks again

Bob

[catrina 103]

Okay, I understand what you mean.

In order for PRODUCTS to remain highlighted while you're on a child page that's under PRODUCTS, you need these selectors that looks as follows:

body.PAGEIDFORCHILDPAGE

This is the selector for the child page that you are currently viewing

li.SELECTORFORPARENTPAGE.SELECTORFORCHILDPAGE

The <li> selector needs to include the selector for the parent AND the selector for the child (separated by a period)

I hope that makes sense!

[brempfer 0]

Thanks Catrina - I will take another swing.

[catrina 103]

I managed to help someone get it done here: http://www.kickstartdigital.com. Click on Digital Brand Innovation > Cases and when you're on Cases, note that Digital Brand Innovation AND Cases are highlighted (they wanted a different style - nonetheless, the parent is still highlighted while the child page is being viewed).