Archived

This topic is now archived and is closed to further replies.

  • 0

active menu item background color not different on fixed navbar


Question

Posted · Report post

  • 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:

.navbar .navline > li.current-menu-item > a {
background-color: rgba(0,0,0,0.1);
color: #000000;
}

 

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:

http://clientdev3.ramacommunications.net/

Share this post


Link to post
Share on other sites

4 answers to this question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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 - http://screencast.com/t/rRjLMXCc9H4P

Share this post


Link to post
Share on other sites

Posted · Report post

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?

 

 

.navbar .navline > li > a:hover {
    background-color: rgba(255, 119, 71, 0.3);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}
.navbar .navline > li > a:active {
    background-color: rgba(255, 119, 71, 0.9);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}
.navbar .navline > li > a:focus {
    background-color: rgba(255, 119, 71, 0.9);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}
.navbar .navline > li > a:current {
    background-color: rgba(255, 119, 71, 0.9);
    color: rgba(255, 255, 255, 0.9);    text-decoration: none;
 }
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?

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you! That did it.

 

The code that I used:

 

 

.navbar .navline > li.current_page_item  a {
    background-color: rgba(255, 119, 71, 0.5);}
 

Share this post


Link to post
Share on other sites