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?

1 Answer 1

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
    Commented Sep 24, 2017 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
    Commented Sep 24, 2017 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
    Commented Sep 24, 2017 at 15:44
  • what would I update in order to have the page & subpage link bolded when you are on the page?
    – Neens
    Commented Sep 24, 2017 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
    Commented Sep 24, 2017 at 15:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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