Add an active state to Current Menu Item

Here’s some CSS code to easily add an active state indicator to the current main menu item.

  1. Log into the WP Dashboard and click Appearance > Site Options > Custom CSS
  2. Copy the code below
  3. Paste code into the Custom CSS field and adjust as necessary
  4. Save All Changes in the Site Options Panel
  5. That’s it, you’re all set! 🙂

CSS Code:

#menu-main-nav li.current_page_item,
#menu-main-nav li.current_page_parent,
#menu-main-nav li.current-page-ancestor {
	background:#182947 !important;
	border-radius: 5px;
}