Setting up sub-menu items for a main menu item is an easy routine through drag and drop in menus section of WordPress Dashboard. In majority of WordPress Themes, when you hover over sub-menu items the parent main menu item is no longer highlighted. Do you want to keep the main parent menu item highlighted while hovering over its sub-menu items?

Visual Demo: Highlight Menu item while sub menu hover

On left, while hovering over sub-menu items like: SEO Optimization, Web Design, Online Development – the main parent menu “Services” is not highlighted. While on right side, then main menu “Services” is highlighted while hovering over sub-menu items.

Highlighted main menu while hovering sub menus

The second (right side) setup look much better and it is very easy to achieve. Just one line of css code in your style.css file.

Required CSS code for this modification

Just add following code to your style.css file. Make sure you change background color and text color according to existing settings of the primary menu. Also, replace the class name being used for menu in your WordPress Theme. It could be .nav in place of .nav-primary class.

https://gist.github.com/8974949

More neater way to implement this is by adding it to existing .nav-primary a:hover section as seen in screenshot below:

Highlight main menu css code

Video Preview: Default vs the highlighted main menu

Share on LinkedIn

Davinder Singh Kainth

A digital creator with 15+ years of experience in Website Design, Development, SEO, and Content Creation to Podcasting at SmartWebCreators.com with the motto of "Be Smart, Keep Creating". A coach, consultant, and your dear geek friend ❖

1 Comment

  1. OJoIP on February 25, 2017 at 3:18 pm

    Thanks… Worked like a charm.

    Reply

Leave a Comment