WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

My client has a menu like this image below that I am trying to re-produce for them as a WordPress Menu...

enter image description here

My first attempt so far was to utilize the after parameter option for the wp_nav_menu.

Below you can see where I have passed in <span class="navSep">|</span>

This adds the Pipe after each menu item. I need to somehow make it not add to the last menu item or else it does not look right having an ending pipe.

Any suggestions? I would rather stay away from using JavaScript to hide/remove the last item.

I am open to anything as long as I can output the menu like the image below?

    'menu' => 'footer-menu-1' ,
    'after' => '<span class="navSep">|</span>'
share|improve this question
up vote 1 down vote accepted

You could build a custom Walker that would either not insert that on the last field or insert classes you could use, but if this is the only change you want that would be overkill. Hide it with CSS. Something like...

.menu li:last-child .navSep {

I guessed at the CSS but that is the general idea.

share|improve this answer
read how to use :last-child css selector – Ravinder Kumar May 22 '13 at 18:50

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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