Jump to content

Archived

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

balfred1345

How to highlight current menu item in NavBar

Recommended Posts

balfred1345    5
balfred1345

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
Rob    547
Rob

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.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
batman    389
batman

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 


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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
  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
balfred1345    5
balfred1345

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
Danny    1,327
Danny

No problem, happy to help!


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Rob    547
Rob

You're very welcome Bruce.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

  • Similar Content

    • khat
      By khat+
      I think I may have installed pagelines pro incorrectly, and then used features incorrectly. I installed first platforms framework theme and then the child, thinking I could do setup for child later. I tried to set up a background image, and tried custom css feature in pagelines dashboard. I had mistakes in my css, and just thought that if I deleted the info in the css custom feature in pagelines dashboard that the new information would overwrite the old info. The background image didn't respond at all, probably because I didn't have the child directory renamed. I then tried to use the LSS plugin to create css and added more css, possibly, somewhere -sigh-. I never did change the background image and get it placed properly. I used a workaround and in nested containers I placed a background image which worked well enough, so I moved on to try to create my nav bar/ menu bar. When I go to the Menus panel, there is NO area where I can place a menu on a page. I have read and reread and re- re- reread the instructions for placing a menu. I've used the pagelines editor to place a menu, however only HOME shows up. I've been at this for many hours. I've since uninstalled all of my pagelines items and reinstalled, thinking that it would restore all my changes to default, but no, it is still all there, with all my unresolved issues. I am completely at a loss as to what to do next.
    • Jarek
      By Jarek+
      How to make the Impulse menu sticky?
      Here is a site that seems like it is doing just that: http://www.manhattanperiodontist.com/
      Here is the site I am working on: http://boeriu.digitalvector.com/ 
      I have no problem showing the menu at the bottom, but when scrolling up it does not stick.  I tried to add Nav Pro menu but when I do that, it just shows on top and no matter what I try is not working as I want it to.
      Any suggestions?
    • Dave
      By Dave+
      1) Toggle menu on mobile devices does not work properly, combination Chrome 56.0.2924.87 with Android 6.0.1

      2) Mobile / Default Menu > Set the primary/default navigation for your site. This will be used in the pop out mobile menu and as the default in navigation sections. Does not work.
    • Grant Turck
      By Grant Turck+
      Navbar Broken on All Devices When Not Logged Into Wordpress. See screenshots attached from mobile. What is causing this issue and how do I fix? Site is venicepride [dot] org.


    • David
      By David+
      We are building a long-page scrolling site with Pagelines 5. Our menu is made with # links that go to a container's unique ID, e.g. container_ux7al6g
      This works, but it doesn't look great in the menu. Is it possible to assign a 'nice' # link, e.g. /#solutions ? 
      We used to do this in the DMS2 platform through a workaround, but that doesn't seem to be possible now. 
      Any suggestions? 
×