I'm working on a custom dropline menu using wp_nav_menu.

Using wp_nav_menu( array( 'theme_location' => 'primary', 'after' => '|' ) );, I can put separators after every item. However, I'm only wanting them after the child items in the sub-menu.

Is there any way I can be more specific about which items have separators, such that only the non-parent items are separated?


3 Answers 3


Why not use a purely CSS-based solution, using the :after pseudo-element? e.g.

#nav li li a:after {
    content: '|';
  • I completely forgot about using the "content" attribute. That's totally what I was looking for, thanks!
    – aendra
    Commented Jul 22, 2011 at 18:26

You can extend Walker class which wordpress uses for wp_nav_menu to style your menu in your way....

Here is an example...



For a similar project, I used a single line of jQuery to selectively add spacers:

jQuery('ul#menu-main-menu-1 li.menu-item-267, ul#menu-main-menu-1 li.menu-item-265').append(' | ');

Leaving question open in hopes that somebody has a more elegant solution than this...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.