Jump to content


Photo
- - - - -

active menu item background color not different on fixed navbar

fixed navbar

Best Answer catrina , 19 March 2013 - 03:35 PM

The current page item has a selector like this in it: .current_page_item (or it might be .current_menu_item)

 

That needs to be in the CSS in order for the background of that item to remain a certain color.

Go to the full post


  • Please log in to reply
4 replies to this topic

#1 suerama

suerama

    Super Member

  • Members

  • 247 posts

Posted 19 March 2013 - 04:41 AM

  • I'm using a fixed navbar in Pagelines version 2.3.7

The background color on the active menu item is not displaying differently from the other menu item. I added this code that I copied from somewhere else, into my Custom Code area, but to no avail:

Please Login or Register to see this Hidden Content

 

I'm wondering if there could be some conflict with the Grid Portfolio section I've installed on the site. 

 

But in any case, can someone help me figure out how to make the background color different from the other menu items, as usually occurs with the fixed navbar?

 

Please see the page on my dev site:

Please Login or Register to see this Hidden Content



#2 James B

James B

    Advocate

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

Posted 19 March 2013 - 04:50 AM

Hi there, the li.current-menu-item looks like the code for the classic nav, not for the navbar. Try using a:active in place of that part. When you inspect the element in firebug, check on the little arrow next to the style tab in above the css on the right and you'll be able to select to display the hover,focus and active attributes from the drop down.

 

Then you'll be able to see the active setting for the css, like in this screenshot -

Please Login or Register to see this Hidden Content



#3 suerama

suerama

    Super Member

  • Members

  • 247 posts

Posted 19 March 2013 - 02:27 PM

Thanks, James, I feel I'm headed in the right direction, though not quite there.

 

First, I figured out that what I was really wanting was a background different on the menu item of the current page, (which I thought was the active link, but now realize is not), so folks know what page they are on. 

 

I haven't managed that, although I have managed to change the active and hover states. The code is below. What I would like to do is have the menu item stay maintain the active link color on the current page. How might I achieve that, please?

 

 

Please Login or Register to see this Hidden Content

But another thing that puzzles me is this: isn't this different color of the current page's menu background a default in the fixed navbar? Usually, I believe it is  rgba (0, 0, 0, 0.9), no? Somehow it didn't appear this way in this navbar, there was no difference in background colors at all. Why is that, do you know?


#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 19 March 2013 - 03:35 PM   Best Answer

The current page item has a selector like this in it: .current_page_item (or it might be .current_menu_item)

 

That needs to be in the CSS in order for the background of that item to remain a certain color.



#5 suerama

suerama

    Super Member

  • Members

  • 247 posts

Posted 19 March 2013 - 10:25 PM

Thank you! That did it.

 

The code that I used:

 

 

Please Login or Register to see this Hidden Content







Also tagged with one or more of these keywords: fixed navbar