Jump to content


Photo
- - - - -

Menu Page and Menu Category Page Differences


  • Please log in to reply
16 replies to this topic

#1 dario

dario

    Super Member

  • Members


  • 152 posts
  • LocationMinneapolis
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 16 July 2013 - 08:17 PM

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.

Please Login or Register to see this Hidden Content

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.



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 16 July 2013 - 11:39 PM

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.


  • dario likes this

#3 dario

dario

    Super Member

  • Members


  • 152 posts
  • LocationMinneapolis
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 17 July 2013 - 01:56 AM

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.

#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 17 July 2013 - 06:55 AM

It probably has something to do with 

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



#5 dario

dario

    Super Member

  • Members


  • 152 posts
  • LocationMinneapolis
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 17 July 2013 - 07:00 PM

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:

Please Login or Register to see this Hidden Content



#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 July 2013 - 11:47 PM

Hi there
 
I've tested using the below and it's working on the active menu for my category item in the menu -

Please Login or Register to see this Hidden Content

 
.navbar .navline > li.current-menu-item > a {
    background-colorgreen;}


#7 dario

dario

    Super Member

  • Members


  • 152 posts
  • LocationMinneapolis
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 18 July 2013 - 03:35 PM

Still no luck.

 

If you have the time, take a look here:

Please Login or Register to see this Hidden Content

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.



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 19 July 2013 - 06:06 PM

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.



#9 dario

dario

    Super Member

  • Members


  • 152 posts
  • LocationMinneapolis
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 19 July 2013 - 06:47 PM

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



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 19 July 2013 - 09:03 PM

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.



#11 dario

dario

    Super Member

  • Members


  • 152 posts
  • LocationMinneapolis
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 19 July 2013 - 09:37 PM

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.

#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 19 July 2013 - 09:50 PM

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



#13 dario

dario

    Super Member

  • Members


  • 152 posts
  • LocationMinneapolis
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 19 July 2013 - 09:55 PM

Nope.

#14 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 July 2013 - 11:10 PM

Hi there, I've had a look at the live site and tried a couple of things, try setting it to a solid color -

Please Login or Register to see this Hidden Content

 

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


#15 dario

dario

    Super Member

  • Members


  • 152 posts
  • LocationMinneapolis
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 21 July 2013 - 09:29 PM

Hi James,

Thanks.

Your code got rid of the darker blue.

 

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

Please Login or Register to see this Hidden Content

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

 

Very, very odd.



#16 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 21 July 2013 - 10:58 PM

Dario,

 

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



#17 dario

dario

    Super Member

  • Members


  • 152 posts
  • LocationMinneapolis
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 21 July 2013 - 11:38 PM

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