Highlight the Current Page Of A WordPress Navigation Menu

If your theme supports WordPress menus (Appearance > Menus), you already have a built-in class that makes it easy to highlight the page being viewed. By default, WordPress adds the class current-menu-item to the <li> of the menu item that links to the current page, so a few lines of CSS are enough.

li.current-menu-item a {
text-decoration: underline;
background: #333;
color: #fff
}

This rule underlines the active link and shows it in white on a dark background. Add it to your child theme’s style.css or to Appearance > Customize > Additional CSS, and change the colors to suit your design.

A few tips

• The selector styles the <a> inside the list item, because the link is the element that holds the text.
• li.current-menu-item a also matches links in a submenu below the current item. Use li.current-menu-item > a to style only the item’s own link.
• Parent items get classes too: current-menu-parent and current-menu-ancestor mark the items above the current page, which helps when you want to highlight the top-level section of a dropdown menu. Items that have a submenu get menu-item-has-children, the class to target when you add a dropdown indicator arrow.
• If your theme’s own menu styles override yours, make the selector more specific, for example by starting it with your menu’s container class. Your browser’s inspector shows which classes are available.

Related articles

• adding custom classes to the body tag: style a whole page differently, not just its menu link
• fixing parent menu items that can’t be tapped on mobile: another CSS fix for WordPress dropdown menus

See also: How To Highlight Search Results In WP.