• 0

Menu Page and Menu Category Page Differences

Question

Posted · Report post

Well I'm stumped. I've got some standard NavBar styling that's not working as expected. The trouble spot is in the current page item styling. When on a page, whether home (blog), category page, contact page, etc., the menu item should stay at its hover state (bg colored #e8af10)

 

The following works fine if the menu item goes to a normal page. It does not work if it goes to a category page.

.navbar.pl-color-blue li a:hover:hover, .navbar.pl-color-blue li.current_page_item > a:hover, .navbar.pl-color-blue li.current-page-ancestor > a:hover {
background-color: 
#e8af10;
color: 
#003876;
}

When I Firebug the menu (after selecting the working item and then any other item) I see the that the styling is applied, it just only shows the styling when the menu goes to a page.

 

All rollovers/hovers work fine on all items too.

Share this post


Link to post
Share on other sites

16 answers to this question

  • 0

Posted · Report post

Hi Dario,

 

This may sound a silly question, but when you're viewing it in Firebug, did you tick the option to view active, hover and focus under Firebug's Style tab?

 

I'm only asking because most people don't know those options exist.   I presume you do, but have to ask.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Rob,
That's cool and no, I was not aware of the option. I'll check when I get back to my main computer.

Looking at .current-cat as well but since the 'home' page link doesn't stay visually selected either (and it's not a category page) that can't be it.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It probably has something to do with 

.navbar.pl-color-blue li.current-page-ancestor

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

OK, I got Firebug to display the different states and all the menu items show the same styles.

And yet, the results are not the same, as per my initial post.

 

I've tried adding the following classes to the code I posted above:

.current-menu-item,
.current-page-ancestor,
.current-post-ancestor

 

None seem to have any effect.

 

It's very odd, how the one item which goes to a WP static page is the only one to follow the rules.

 

On my another one of my sites, the following works fine:

/* THIS IS THE MAIN NAV STYLING */
.navigation_wrap .main_nav_container {
  border-bottom: 1px solid #ccc;
}

.main_nav ul li a	{
  color: #999 !important;
  font-size: 1.25em;
}

.main-nav li a:hover:hover, .main-nav li.current_page_item > a:hover, .main-nav li.current-page-ancestor > a:hover {
  background-color: #f6f6f6;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there
 
I've tested using the below and it's working on the active menu for my category item in the menu - http://screencast.com/t/huePdwN08
 
.navbar .navline > li.current-menu-item > a {
    background-colorgreen;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Still no luck.

 

If you have the time, take a look here:

http://paword.org/about-us/

The bg of the 'About Us' on the menu is a darker blue (not intended) and I cannot target it.

The bg of all other items, when on their pages, stays the medium blue, unlike 'About Us'.

 

On hover all bg of the menu items should turn yellow and the text blue. This works fine.

The current page, however should maintain the hover-state (yellow bg and blue text).

 

AFAIK, I've tried all permutations. Even NavClassic and StandardNav using a WP menu. In those cases I can get the current item to maintain the hover state style but it's not as nicely responsive and I cannot selectively choose which 'pages' are in the menu. All pages get added. - But that's a tangental issue.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I just looked at your site and cannot see any variation.  The menu bar is dark blue, with a yellow background on hover for every menu item.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Rob,

When you choose 'About Us' the bg of that li element turns and stays a different blue from the main menu bar blue. It is quite subtle but the screen shot below should show it better.

 

I can target it to make it stay yellow (which is my main intent) but no other menu element then follows suit. I cannot target it in a way for that element to stay the same blue as the menu.

 

PA-Menu.jpg

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I must need new glasses.

 

Okay. I don't think it's a background color, but an overlay that's causing this.

 

We have to look at the entire menu structure, classes, custom CSS, etc. to find where this condition is being created.  The odd thing I am trying to figure out is that when I click another menu item, Firebug seems to think that the About Us tab is still the one to be reviewed even though I'm using the Firebug cursor to click the other link.  Weird.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

What makes it weirder for me is that when I use Nav Classic instead, that displays every page in the system, not just the ones I specifically put in the menu. It does, however, style as I want it so that's good but it isn't responsive in the same way as the NavBar is so I'd prefer not to use it.

Anyway, thanks for hunting this down with me.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Just out of curiosity, is that item a parent page for all the others?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Nope.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, I've had a look at the live site and tried a couple of things, try setting it to a solid color - http://screencast.com/t/aQ2nBdQCP

 

.navbar .navline > li.current-menu-item > a {
    background-color#003876 !important;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi James,

Thanks.

Your code got rid of the darker blue.

 

Still, when I try to get all of the items to stay gold:

.navbar .navline > li.current-menu-item > a {
  color: #003876 !important;
  background-color: #e8af10 !important;
}

. . . the only one to stay is the 'about us' page.

 

Very, very odd.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Dario,

 

Could it be a cache plugin keeping you from seeing changes? If you have one, clear the plugin's cache.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Good thinking and I'll keep that in mind for the future.
No cache plugin on the site (or server) and never was.

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