Title: adding separator
Last modified: August 21, 2016

---

# adding separator

 *  [hAtul](https://wordpress.org/support/users/free269/)
 * (@free269)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/adding-separator/)
 * Hi,
 * I’m working on a new theme based on the twentyfourteen theme.
    I want to add 
   some dot separators on the main navigation menu. So I rewrote this line in the
   head: `<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' 
   => 'nav-menu', 'link_after' => '</a> ·' ) ); ?>`
 * the problem is that it adds a dot on the last loop
    Ex: Home **–** About **–**
   Info **–** Cars **–** Buses **–**
 * Any ideas how to solve this?

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

 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/adding-separator/#post-4981767)
 * Why not use CSS to add your separators then remove the last one using the [pseudo :last-child selector](http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:last-child)?
 *  Thread Starter [hAtul](https://wordpress.org/support/users/free269/)
 * (@free269)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/adding-separator/#post-4981780)
 * How exactly can I do this with this option?
    I can’t really understand
 *  Thread Starter [hAtul](https://wordpress.org/support/users/free269/)
 * (@free269)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/adding-separator/#post-4981790)
 * `<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-
   menu', 'link_after' => '</a> <span class="dot">·</span>' ) ); ?>`
 *     ```
       .nav-menu > li:last-child{
          .dot{
          	display: none;
          }
        }
       ```
   
 * * not all the list items have the same class
 * So.. where is my mistake?
 *  Thread Starter [hAtul](https://wordpress.org/support/users/free269/)
 * (@free269)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/adding-separator/#post-4981791)
 *     ```
       <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'link_after' => '</a> <span class="dot">·</span>' ) ); ?>
       ```
   
 *     ```
       .nav-menu > li:last-child{
          .dot{
          	display: none;
          }
        }
       ```
   
 * * Not all the list items have the same class name. if it matters for some reason…
 * So.. what is my mistake?
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/adding-separator/#post-4981870)
 * Apply the dot using CSS and then remove it on the last item via :last-child.
 *  [sdls](https://wordpress.org/support/users/simon_said/)
 * (@simon_said)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/adding-separator/#post-4982055)
 * #Free269 Your really close just remove that nesting in the CSS:
 *     ```
       .nav-menu > li:last-child .dot {
          display: none;
        }
       ```
   
 * Regarding #esmi comments:
 * Sometimes adding bullets via CSS can be unpredictable on older browsers, as well
   as different media platforms such as tablet and iPhone… although the method mentioned
   above is cumbersome it does degrade better in older browsers. Could you provide
   some CSS you felt worked well for this purpose #esmi? thanks!

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

The topic ‘adding separator’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 6 replies
 * 3 participants
 * Last reply from: [sdls](https://wordpress.org/support/users/simon_said/)
 * Last activity: [11 years, 2 months ago](https://wordpress.org/support/topic/adding-separator/#post-4982055)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics