Adding a Class to Sub-Menu Parent Items in WordPress

I’ve been trying to figure out the best approach to add an indicator to any menu item that contained a sub-menu. Originally, I was using a fancy CSS selector to get the job done. These are the selectors I used in Gridiculous to get it to work:

#site-navigation li a:not(:last-child):after {}
#site-navigation ul ul li a:not(:last-child):after {}

You can see is working on the demo site: http://demos.bavotasan.com/gridiculous/
I’m currently working on a new theme the requires a bit more control over the parent sub-menu item and the above solution just isn’t cutting it anymore. Luckily, I came across a great function that adds a walker to the nav menu that includes a custom class to the parent item. Problem solved.
Check out Kirk Wight’s article Adding a sub-menu indicator to parent menu items to see the solution I’m now using. Scroll down to the comments on Kirk’s article for an extra snippet that makes implementing the walker even easier.

Share this:

Email
Facebook
Twitter
Pinterest
Pocket

Premium Themes for WordPress

Looking for an easy-to-use Premium Theme for WordPress? Check out Themes by bavotasan.com and have your site up and running in no time.

Use this WordPress website builder to build powerful websites in no time for your or your clients.

WordPress Hosting

WP Engine – designed from the ground-up to support and enhance the workflow of web designers.

Bluehost – providing quality web hosting solutions since 1996.

About the author

Picture of Luke Perrie

Luke Perrie