WordPress marks the currently displayed page in the menu with CSS classes .current-menu-item
, .current-menu-parent
, .current-menu-ancestor
. Add the required styles to highlight items using these classes.
Sample Menu:
* Blog
* First Category
* Second Category
* About
* Contact
When you open blog page, the corresponding menu item (“Blog“) has a class .current-menu-item
. Similarly, when you open a contact page, the corresponding menu item will have a class .current-menu-item
.
if you go to the page second category, the menu item “Second Category” will have class .current-menu-item
and “Blog” item will have class .current-menu-parent
.
UPDATE (Highlight similar to hover)
To highlight “Blog” on your site when you are on the home page or one of the categories (“Music & Party”, “Travel & Culture”, etc.) add to styles:
.home #menu-item-1258 > a span,
#menu-main > .current-menu-item > a span,
#menu-main > .current-menu-parent > a span,
#menu-main ul .current-menu-item,
#menu-main ul .current-menu-parent {
background-color: #37cadd;
}