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>'

1 Answer 1


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.


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.