Title: separators between navigation links
Last modified: August 21, 2016

---

# separators between navigation links

 *  [thebigblue](https://wordpress.org/support/users/thebigblue/)
 * (@thebigblue)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/separators-between-navigation-links/)
 * I’m using the following code in my template header to add separators between 
   navigation links,
 *     ```
       <?php wp_nav_menu( array( 'link_after' => '<li><font color="#89dcdb">|</font></li>','theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
       ```
   
 * however, this adds a separator to the right of the last menu item. How can I 
   go about removing this? I am new to WP and my CSS is relatively limited, so I’d
   be really grateful if anyone is able to explain how to do this and where code
   needs to sit.
 * Many thanks

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

 *  [Csaba (LittleBigThings)](https://wordpress.org/support/users/littlebigthing/)
 * (@littlebigthing)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/separators-between-navigation-links/#post-4519046)
 * You could use the [last-child CSS selector](http://www.w3schools.com/cssref/sel_last-child.asp)
   specifically (with a class selector) for your menu. This way you can set unset
   the separator specifically for the last menu item (li).
 * If you post your site’s url it is easier to give more specific advice.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 2 months ago](https://wordpress.org/support/topic/separators-between-navigation-links/#post-4519048)
 * You might as well go CSS all the way with this, with the after/before pseudo 
   selectors
    [http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/](http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/)
 *  Thread Starter [thebigblue](https://wordpress.org/support/users/thebigblue/)
 * (@thebigblue)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/separators-between-navigation-links/#post-4519057)
 * Hi LittleBigThing,
 * I’m relatively new to CSS, so not entirely sure how to do that.
 * This is a link to my site (thus far)
 * [http://nhspropertyservices.co.uk](http://www.nhspropertyservices.co.uk)
 * I basically have a couple of issues with the navigation menu at the moment. Firstly,
   as I mentioned, I want to be able to remove the ‘last’ separator, to the right
   of the last menu item. I’ve added the separators using this code:
 * `<?php wp_nav_menu( array( 'link_after' => '<li><font color="#89dcdb">|</font
   ></li>','theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>`
 * The second problem I have is that I am trying to set the mouse over so that the
   green colour goes slightly darker, which is working, however I want the dark 
   green colour to fill the width of the menu item, i.e. the full width between 
   the separators and not as currently, just the width of the text itslef. I can
   not figure out how to achieve this at all.
 * The final thing I am struggling with (and please let me know if this needs to
   go into a new post, is how on earth do I change the background colour of the 
   area just below the navigation menu, that shows the page titles? I’ve tried every
   possible thing and I still can’t get this to work.
 * Many thanks for any help and assistance.
 *  [Csaba (LittleBigThings)](https://wordpress.org/support/users/littlebigthing/)
 * (@littlebigthing)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/separators-between-navigation-links/#post-4519060)
 * You could indeed better use CSS only to add the separators as a right border 
   for your menu items…
 * Try to add this CSS code in your child theme’s style.css (without adding the 
   above php code):
 *     ```
       #site-navigation > ul li {
       border-right: 1px solid #89dcdb;
       }
       #site-navigation > ul li:last-child {
       border-right: none;
       }
       ```
   
 * I hope it works and looks OK. It will be a separator though that completely spans
   your navigation bar (from top to bottom)…
 *  Thread Starter [thebigblue](https://wordpress.org/support/users/thebigblue/)
 * (@thebigblue)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/separators-between-navigation-links/#post-4519061)
 * That is what I had in place originally, the reason I changed it was because visually
   I didn’t want the separator to appear top to bottom, hence the approach currently
   adopted.
 * I assume there must be a way to remove the last separator though?
 * Do I need ot post my other issues in separate posts, sorry, but I am also new
   to WP?
 * Many thanks
 *  [Csaba (LittleBigThings)](https://wordpress.org/support/users/littlebigthing/)
 * (@littlebigthing)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/separators-between-navigation-links/#post-4519064)
 * Sorry, had no time to figure out the answer to your second question. You should
   post a new thread on this get an answer more quickly.
 * To remove the last separator try adding the following css code instead:
 *     ```
       #site-navigation > ul li:last-child {
       display: none;
       }
       ```
   
 *  Thread Starter [thebigblue](https://wordpress.org/support/users/thebigblue/)
 * (@thebigblue)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/separators-between-navigation-links/#post-4519065)
 * Okay, that didn’t make any difference sadly! Not sure what else to try?
 * I’ll create new posts for the other questinos, thanks
 *  [Csaba (LittleBigThings)](https://wordpress.org/support/users/littlebigthing/)
 * (@littlebigthing)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/separators-between-navigation-links/#post-4519067)
 * and if you’d leave out the “>”?
 *  Thread Starter [thebigblue](https://wordpress.org/support/users/thebigblue/)
 * (@thebigblue)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/separators-between-navigation-links/#post-4519068)
 * You’re a genius, yes that now works…
 * Many thanks, one step closer now. I’m going to post the other questinos I have
   now…
 * Thanks once again…

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

The topic ‘separators between navigation links’ is closed to new replies.

## Tags

 * [navigation links](https://wordpress.org/support/topic-tag/navigation-links/)
 * [separators](https://wordpress.org/support/topic-tag/separators/)

 * 9 replies
 * 3 participants
 * Last reply from: [thebigblue](https://wordpress.org/support/users/thebigblue/)
 * Last activity: [12 years, 2 months ago](https://wordpress.org/support/topic/separators-between-navigation-links/#post-4519068)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics