Jump to content
suerama

active menu item background color not different on fixed navbar

Recommended Posts

suerama+    2
suerama
  • 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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
suerama+    2
suerama

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
catrina    103
catrina

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.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
suerama+    2
suerama

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

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


  • Similar Content

    • sethoof
      By sethoof
      Trying to do some really simple font customization on the fixed navbar of my new site (www.sethcochran.com), but am just not figuring out how to get this done.  I have tried firebug, and read all the forum posts I can find and have tried three different custom css, but nothing seems to work 
       
      I want to make the font in the fixed navbar bigger, bold, and white.  
       
      .my-white-top {   .section-navi .nav-searchform, .section-navi ul {     font-size: 22px;     color: white;   } }   .bigger {   .navbar .navline > li > a {font-size: 22px; color:#ffffff !important;} }   test23 {   #navbaru89781 .navline > li > a { font-size: 30px;   } }    
      None of these has worked.  Can anyone help?
    • sqsatg
      By sqsatg
      Hi :)
       
      I would like the navbar becomes fixed and full width when reach a particular height (e.g : http://www.fubiz.net/)
      I can't provide you any link to the website since it is on local.
       
      Is it possible ? What should I do ?
       
      Regards
    • studio12
      By studio12
      Fixed Navbar enabled BUT Standard Navbar still there - can someone please tell me how to get rid of the Standard Navbar after Fixed Navbar enabled?
       
      website: http://www.barrywhitlow.com/
    • ppotent
      By ppotent
      So in October last year, I posted about a bug in the fixed navbar: http://forum.pagelines.com/topic/30309-fixed-navbar-stuck-changes-not-working/
      I got lots of help and support from Danny, but nothing resolved.
      Out of curiosity, I tried to enable fixed navbar again, now that we are at DMS 1.1.5, but it's still broken: ie. no changes can be made to navbar on static pages; only on post/category/tag pages
       
      So does anyone have any suggestions about how I can get the fixed navbar working again. Can I reinstall wordpress or DMS or something and then put my content back in? Any and all ideas welcome.
       
      Thanks
       
    • seanocaside21
      By seanocaside21+
      Hi Everyone, 
       
      I am working on a project and was wondering if it is possible to introduce a fixed full width section above the fixed navBar?
       
      It would contain things like contact details, social media icons and possibly a newsletter sign-up form.
      Something like this site: http://www.thewhiskybond.co.uk/
       
      Any advice / help would be appreciated. 
       
      Cheers,
       
      Sean
×