Jump to content


Photo
- - - - -

How to highlight current menu item in NavBar

Menu Highlight Navbar

Best Answer Danny , 06 September 2013 - 12:33 PM

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.wordpre...tem_CSS_Classes
Go to the full post


  • Please log in to reply
6 replies to this topic

#1 balfred1345

balfred1345

    Advanced Member

  • Members

  • 95 posts
  • LocationFlyover Country, USA
  • Framework Version:Some sites Pagelines Framework (latest version), some sites DMS latest version
  • Country: Country Flag

Posted 06 September 2013 - 02:36 AM

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.webhos...oh6/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

 



#2 Rob

Rob

    One Smart Egg

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

Posted 06 September 2013 - 06:22 AM

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.


#3 batman

batman

    Bat Learning

  • Members

  • 2067 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 06 September 2013 - 09:48 AM

@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 



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 15702 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 06 September 2013 - 12:33 PM   Best Answer

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.wordpre...tem_CSS_Classes

  • balfred1345 likes this

#5 balfred1345

balfred1345

    Advanced Member

  • Members

  • 95 posts
  • LocationFlyover Country, USA
  • Framework Version:Some sites Pagelines Framework (latest version), some sites DMS latest version
  • Country: Country Flag

Posted 06 September 2013 - 01:52 PM

Thanks for the replies @Rob & @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


#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15702 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 06 September 2013 - 01:53 PM

No problem, happy to help!



#7 Rob

Rob

    One Smart Egg

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

Posted 06 September 2013 - 04:52 PM

You're very welcome Bruce.







Also tagged with one or more of these keywords: Menu, Highlight, Navbar