• 0

How to highlight current menu item in NavBar


Question

Posted · Report post

I'm trying to have current page highlighted in the menu item in NavBar.

 

I have tried a number of CSS options, but can't get any to work. 

 

Can you please tell me what I need to do to have my menu item highlighted when I'm on that corresponding page?

 

I'm developing the site here:

http://whub34.webhostinghub.com/~videoh6/cidev2.com/

 

Here are a few of my latest attempts:

 
/* Navbar Active Page Menu Item Background Color */
 
#page li.current-menu-item {
  box-shadow: 0 -4px 0 #8A0917 inset;
}
 
#page .navbar .navline > li.page_item .page-item-10 .current_page_item {
box-shadow: 0 -4px 0 #8A0917 inset !important;
}
  
#page .navbar.pl-color-base .navline > li.current-page-item {
  box-shadow: 0 -4px 0 #8A0917 inset !important;
}
 
#page .navbar.pl-color-base .navline > li.current-menu-item {
  box-shadow: 0 -4px 0 #8A0917 inset !important;
}

 

 

Thanks,

Bruce

 

Share this post


Link to post
Share on other sites

6 answers to this question

  • 0

Posted · Report post

Hi,

 

Well you haven't set a custom menu to your NavBar, so its still using pages which are added by Wordpress.

So to target the current page in your menu you would need to use this:

 

#site .navbar .navline >li.current_page_item a {
background: #333;
color: #F00;
}
 
However, by default the NavBar should automatically have some styling in place.
 
When you create a Custom menu, this CSS will no longer work as the class changes from current_page_item to current_menu_item.
 
You can find more info by these Wordpress classes here - http://codex.wordpress.org/Function_Reference/wp_nav_menu#Menu_Item_CSS_Classes
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I think the CSS you need to modify is closer to

.navbar.pl-color-base .navline > li:hover > a, .navbar.pl-color-base .navline > li.current-menu-item > a, .navbar.pl-color-base .navline > li.dropdown.open > a {
    background-color: rgba(0, 0, 0, 0.66);
    box-shadow: 0 -4px 0 #8A0917 inset;
}
 
Complex CSS isn't my forte' so I'm going to suggest waiting for one of my colleagues or one of your fellow customers to answer, such as batman, who's amazing with this stuff.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Rob "who's amazing with this stuff"

:D 

 

Hi Bruce

Please, you can try with

 

 

a:active {

    box-shadow: 0px -4px 0px rgb(138, 9, 23) inset !important;

}

 

I´m not sure 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for the replies Rob"] & @[member="batman.

 

Big thanks Danny -- You nailed it. I didn't realize I hadn't set the custom menu in NavBar. Once I set the custom menu, this CSS worked:

 

#page .navbar.pl-color-base .navline > li.current-menu-item {
  box-shadow: 0 -4px 0 #8A0917 inset !important;
}
 
Thanks also for the link to WordPress classes Codex page. I'd been using that, but beating my head against the wall, when the various things didn't work -- since I hadn't set the custom menu yet. 
 
Rob -- I used your CSS to style the open dropdown menu item. It worked nicely! Thanks very much!
 
I really appreciate the help!
 
-Bruce

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem, happy to help!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You're very welcome Bruce.

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