Title: Separator between menu items
Last modified: August 19, 2016

---

# Separator between menu items

 *  Resolved [kitory](https://wordpress.org/support/users/kitory/)
 * (@kitory)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/separator-between-menu-items/)
 * Hi to everybody.
    I have received a .psd file to transform in xhtml/css and then
   to a wordpress theme, but I am puzzled. In all menus (language, main and breadcrumb)
   there are no background or other decorations but a vertical separator bar. Something
   like this: menu1 | menu2 | menu3 | menu4 | menu5
 * How can I solve to insert it?
    Is there a documentation page explaining it? Thanks
   for your help.

Viewing 9 replies - 1 through 9 (of 9 total)

 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/separator-between-menu-items/#post-1665204)
 * Generate list for menus and then add a right-hand border to the li elements via
   CSS.
 *  Thread Starter [kitory](https://wordpress.org/support/users/kitory/)
 * (@kitory)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/separator-between-menu-items/#post-1665217)
 * Thanks, I had already tried, what I’m not able to solve is the fact that last
   element doesn’t have it.
    Is it ok if I put an additional class for the last 
   element that sets that border to none? will it give me problem when I’ll convert
   the layout to wordpress theme? Thanks
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/separator-between-menu-items/#post-1665231)
 * OK – so approach it the other way around. Add a left hand border to each li and
   then remove the border on the first li using the [:first-child pseudo class](http://www.w3schools.com/css/pr_pseudo_first-child.asp).
 *  Thread Starter [kitory](https://wordpress.org/support/users/kitory/)
 * (@kitory)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/separator-between-menu-items/#post-1665244)
 * Thanks so much!
    I was nearly getting mad about it! 🙂 You saved me! K
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [15 years, 9 months ago](https://wordpress.org/support/topic/separator-between-menu-items/#post-1665289)
 * Glad to have helped. 🙂
 *  [fmsheikh](https://wordpress.org/support/users/fmsheikh/)
 * (@fmsheikh)
 * [15 years, 8 months ago](https://wordpress.org/support/topic/separator-between-menu-items/#post-1665572)
 * thank you
    but u can apply custom class.
 *  [djanym](https://wordpress.org/support/users/djanym/)
 * (@djanym)
 * [15 years, 3 months ago](https://wordpress.org/support/topic/separator-between-menu-items/#post-1665610)
 * It’s very easy. I’ve described it in my blog [http://lab.ixblogs.com/razdeliteli-v-menyu-wordpress/](http://lab.ixblogs.com/razdeliteli-v-menyu-wordpress/)–
   but it’s on Russian language.
    So: 1. Open «Menu» section. 2. Open “Display Options”(
   at the top) and check “CSS classes”. 3. Open last menu item and enter class name“
   nospan” (or whatever you want). 4. Add to your style.css:
 *     ```
       .nospan span{
       display: none;
       }
       ```
   
 * 5. In the template file (header.php or footer.php, etc.) use this code to display
   menu:
    `<?php wp_nav_menu('menu=Top Menu&after=<span>|</span>'); ?>` “Top Menu”–
   is the name of your menu. That’s all.
 *  [shirgans](https://wordpress.org/support/users/shirgans/)
 * (@shirgans)
 * [14 years, 10 months ago](https://wordpress.org/support/topic/separator-between-menu-items/#post-1665635)
 * just found a very easy way of doing it.
    If you having a list, say generated 
   by wp_nav_menu, you can easily add one line of code to do it:
 *     ```
       <script>
                   jQuery(document).ready(function(){
                       jQuery('ul#menu-footer li:not(:last)').after('<li class="footer-divider">|</li>');
                   });
                 </script>
       ```
   
 * If it doesn’t work, try changing “jQuery” to the $ sign. and make sure the “menu-
   footer” is replaced with your list ID.
    You can also style the seperator with
   css class (like color, padding and so on…)
 *  [shirgans](https://wordpress.org/support/users/shirgans/)
 * (@shirgans)
 * [14 years, 9 months ago](https://wordpress.org/support/topic/separator-between-menu-items/#post-1665638)
 * Ok. new update on this, another easy way doing it, for browsers which does not
   support JS:
    as djanym said, add: `&after=<li class="menu-divider">|</li>` to
   your menu arguments.
 * and in your CSS, add:
    `li.menu-divider:last-child {display:none;}`
 * Have fun.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Separator between menu items’ is closed to new replies.

## Tags

 * [menu](https://wordpress.org/support/topic-tag/menu/)
 * [separator](https://wordpress.org/support/topic-tag/separator/)

 * 9 replies
 * 5 participants
 * Last reply from: [shirgans](https://wordpress.org/support/users/shirgans/)
 * Last activity: [14 years, 9 months ago](https://wordpress.org/support/topic/separator-between-menu-items/#post-1665638)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics