Jump to content
brempfer

Navbar Customizations

Recommended Posts

brempfer    0
brempfer

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.

Share this post


Link to post
Share on other sites
catrina    103
catrina

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?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
brempfer    0
brempfer

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?

Share this post


Link to post
Share on other sites
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
brempfer    0
brempfer

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?

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
brempfer    0
brempfer

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

Share this post


Link to post
Share on other sites
catrina    103
catrina

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!


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
brempfer    0
brempfer

Thanks Catrina - I will take another swing.

Share this post


Link to post
Share on other sites
catrina    103
catrina

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).


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×