0

I am trying to add a feature to my site - when I am on a page, I would like that menu item to be highlighted (in a different color or just be bolded).

I have created a child theme (for portfolio-lite) and edited a few classes already, but I am having trouble adding this menu feature. Can anyone help?

0

The default menu in WordPress already adds classnames for the current menu item, and if its a submenu, the parent will have a classname too as current-parent:

li.current-menu-item{
//here your CSS for the current menu item
}

li.current_page_parent{
//here your CSS for parent menu item of the current menu item
}

enter image description here

7
  • Hi - I have tried to find the current-menu css, but am unable to locate it anywhere in the style.css. This is the code in the css file -
    – Neens
    Sep 24 '17 at 15:44
  • /* General Menu Styles */ ul.menu, ul.menu ul { margin: 0px; padding: 0px; } ul.menu li { list-style: none; line-height: 1; margin: 0px; padding: 0px; } ul.menu li li { font-size: 0.8em; } ul.menu li a, ul.menu li a:link, ul.menu li a:visited { display: block; color: rgba(0, 0, 0, 0.4); border-right: 3px solid rgba(0, 0, 0, 0); text-decoration: none; margin: 6px 0px; padding: 6px 8px; }
    – Neens
    Sep 24 '17 at 15:44
  • ul.menu li a:hover, ul.menu li a:active, ul.menu li a:focus { color: rgba(0, 0, 0, 1); border-right: 3px solid rgba(0, 0, 0, 1); text-decoration: bold; } ul.menu li li a, ul.menu li li a:link, ul.menu li li a:visited { margin: 0px 18px 0px 0px; border-right: 1px solid rgba(0, 0, 0, 0.12); } ul.menu li li a::after { content: none; margin-left: 4px; }
    – Neens
    Sep 24 '17 at 15:44
  • what would I update in order to have the page & subpage link bolded when you are on the page?
    – Neens
    Sep 24 '17 at 15:45
  • you cant locate it because there no CSS being applied to those right? add the CSS in my answer with font-weight:bold to make it bold
    – David Lee
    Sep 24 '17 at 15:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.