Add Caret to Menu Items with Sub-Menus in WordPress Theme

by

I’m working on a custom theme using wp_nav_menu(). What I want to do is add a caret to menu items that have sub-menus. For example, If my menu looks like this:

  • Menu Item 1
  • Menu Item 2
    • Menu Item 2a
    • Menu Item 2b
  • Menu Item 3

I want to be able to format it like this:

  • List item
  • Menu Item 1
  • Menu Item 2 >
    • Menu Item 2a
    • Menu Item 2b
  • Menu Item 3

Without knowing the structure of the menu. This seems like a pretty common formatting problem, so I was wondering if there is any built-in functionality to provide for this.

3 s
3

I do this using jQuery (since it doesn’t necessarily need to be in the TEXT (for screen readers, etc.) – just another option…:

jQuery(document).ready(function() {
  jQuery('ul#nav li').has('ul').addClass('parentul');
});

Then for that “parentul” class I put in a background image of an arrow and position it to the right > …

Leave a Comment