Jump to content


Photo
- - - - -

Navbar Customizations


This topic has been archived. This means that you cannot reply to this topic.
9 replies to this topic

#1 brempfer

brempfer

    Member

  • Members
  • 26 posts

Posted 23 October 2012 - 04:39 PM

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.

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 23 October 2012 - 06:01 PM

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?

#3 brempfer

brempfer

    Member

  • Members
  • 26 posts

Posted 23 October 2012 - 06:50 PM

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?

#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 23 October 2012 - 10:54 PM

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

#5 brempfer

brempfer

    Member

  • Members
  • 26 posts

Posted 09 November 2012 - 06:58 PM

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?

#6 James B

James B

    Advocate

  • Members

  • 5126 posts

Posted 10 November 2012 - 12:16 AM

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.

#7 brempfer

brempfer

    Member

  • Members
  • 26 posts

Posted 12 November 2012 - 08:02 PM

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

#8 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 12 November 2012 - 08:37 PM

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!

#9 brempfer

brempfer

    Member

  • Members
  • 26 posts

Posted 12 November 2012 - 08:39 PM

Thanks Catrina - I will take another swing.

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 12 November 2012 - 08:47 PM

I managed to help someone get it done here:

Please Login or Register to see this Hidden Content

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