Title: Menu separators Last modified: August 20, 2016 --- # Menu separators * Resolved [mcrubbin](https://wordpress.org/support/users/mcrubbin/) * (@mcrubbin) * [14 years, 3 months ago](https://wordpress.org/support/topic/menu-separators/) * I usually build sites on joomla, but a customer wanted a wordpress based one soo here I am trying to build one. and I’m stuck. * NadiaAndDavid.com * I’m trying to add menu separators, here’s the code I have for the menu in my template: * ```
  • >Home
  •  
    • ``` * How can I add a menu separator after every menu item (except the last)? Viewing 15 replies - 1 through 15 (of 17 total) 1 [2](https://wordpress.org/support/topic/menu-separators/page/2/?output_format=md) [→](https://wordpress.org/support/topic/menu-separators/page/2/?output_format=md) * [davejampole](https://wordpress.org/support/users/davejampole/) * (@davejampole) * [14 years, 3 months ago](https://wordpress.org/support/topic/menu-separators/#post-2619919) * You could use a simple `
    ` which gives a simple horizontal line. You can use attributes such as `width=”80%” height=2 noshade’ between the hr and /, or you could do a google search for something like ‘horizontal lines’. This should a ton of results. * Thread Starter [mcrubbin](https://wordpress.org/support/users/mcrubbin/) * (@mcrubbin) * [14 years, 3 months ago](https://wordpress.org/support/topic/menu-separators/#post-2619964) * Where do I add
    in the first place? * [davejampole](https://wordpress.org/support/users/davejampole/) * (@davejampole) * [14 years, 3 months ago](https://wordpress.org/support/topic/menu-separators/#post-2619965) * Anywhere you want a horizontal line. * Thread Starter [mcrubbin](https://wordpress.org/support/users/mcrubbin/) * (@mcrubbin) * [14 years, 3 months ago](https://wordpress.org/support/topic/menu-separators/#post-2619967) * Look at my php code… I need to add in images between each menu item not horizontal lines? * I don’t think you read my question.. * [davejampole](https://wordpress.org/support/users/davejampole/) * (@davejampole) * [14 years, 3 months ago](https://wordpress.org/support/topic/menu-separators/#post-2619968) * You’re right – my mistake. I was seeing what I wanted to see. * Thread Starter [mcrubbin](https://wordpress.org/support/users/mcrubbin/) * (@mcrubbin) * [14 years, 3 months ago](https://wordpress.org/support/topic/menu-separators/#post-2619969) * Thanks for the help anyway 🙂 * [Gary Darling](https://wordpress.org/support/users/garydarling/) * (@garydarling) * [14 years, 3 months ago](https://wordpress.org/support/topic/menu-separators/#post-2619970) * Try putting the character you want as a separator between a couple of ` `‘ s in your list item: `
  •  | 
    • ` I would have tested it first but your site keeps reloading every few seconds – must be something messed up in the code. * Here is another WordPress menu way: * ``` ``` * The ‘before’ parameter adds the html with the pipe character, I used Jquery to remove it from the first list item. * Thread Starter [mcrubbin](https://wordpress.org/support/users/mcrubbin/) * (@mcrubbin) * [14 years, 3 months ago](https://wordpress.org/support/topic/menu-separators/#post-2619971) * Reloading? Hmm… * Where do I change this code? In my header.php? * [Gary Darling](https://wordpress.org/support/users/garydarling/) * (@garydarling) * [14 years, 3 months ago](https://wordpress.org/support/topic/menu-separators/#post-2619973) * That’s a good question – I had your page up for a couple minutes, when I checked the back button history it was full of reloads to that page. What theme are you using and where did you get it? * Thread Starter [mcrubbin](https://wordpress.org/support/users/mcrubbin/) * (@mcrubbin) * [14 years, 3 months ago](https://wordpress.org/support/topic/menu-separators/#post-2619974) * K . I . S * I pretty much took everything out of that template and started from scratch. * Thread Starter [mcrubbin](https://wordpress.org/support/users/mcrubbin/) * (@mcrubbin) * [14 years, 3 months ago](https://wordpress.org/support/topic/menu-separators/#post-2619975) * Oh, and it doesn’t reload. Well kinda I mean, when the slide changes your changes in firebug reset. Just go on another page and then test whatever you were trying to do * Btw, I did stop the timer for now. * [Gary Darling](https://wordpress.org/support/users/garydarling/) * (@garydarling) * [14 years, 3 months ago](https://wordpress.org/support/topic/menu-separators/#post-2619976) * Hmmm, seems ok now – strange. * Try replacing your wp_list_pages with this: ` | ') ;?>` In between the span tags is whatever separator you want, probably with some spaces around it. * You will notice a pipe character before the first item, we need to tackle that with some CSS: * ``` #menu-main-menu li:first-child .separator { display: none; } ``` * Thread Starter [mcrubbin](https://wordpress.org/support/users/mcrubbin/) * (@mcrubbin) * [14 years, 3 months ago](https://wordpress.org/support/topic/menu-separators/#post-2619980) * Seems like I had the wrong code before.. I should have gave you this in the beginning instead of that other code: * ``` ``` * ^^ That’s what displays my menu. I don’t know where to find the actual code that generates the menu. * And I added in the css that you gave me. * **But…** * If I do use this: * ` | ') ;?>` * Is there any way to organize it? Because for me it just set it in alphabetical order with the code above. * Thread Starter [mcrubbin](https://wordpress.org/support/users/mcrubbin/) * (@mcrubbin) * [14 years, 3 months ago](https://wordpress.org/support/topic/menu-separators/#post-2619982) * ^^^ Ignore that last message. * Answer: This ended up working: * ``` .nav li:first-child .separator { background: none; } ``` * Explanation: So I replaced my menu code with this: * ```  ') ;?> ``` * Then I installed: [My Page Order](http://wordpress.org/extend/plugins/my-page-order/) And organized my pages the way I wanted them. * And then I styled in the separator as a image. * Since the separator is a image, I added this class specifically to the first menu item: * ``` .nav li:first-child .separator { background: none; } ``` * **YES! 🙂 THANKS GUYS!** * [Gary Darling](https://wordpress.org/support/users/garydarling/) * (@garydarling) * [14 years, 3 months ago](https://wordpress.org/support/topic/menu-separators/#post-2620023) * Nice work! Maybe you could mark this as resolved? Viewing 15 replies - 1 through 15 (of 17 total) 1 [2](https://wordpress.org/support/topic/menu-separators/page/2/?output_format=md) [→](https://wordpress.org/support/topic/menu-separators/page/2/?output_format=md) The topic ‘Menu separators’ is closed to new replies. ## Tags * [
    ](https://wordpress.org/support/topic-tag/hr/) * [menu](https://wordpress.org/support/topic-tag/menu/) * [separators](https://wordpress.org/support/topic-tag/separators/) * 17 replies * 4 participants * Last reply from: [julifos](https://wordpress.org/support/users/julifos/) * Last activity: [13 years, 7 months ago](https://wordpress.org/support/topic/menu-separators/page/2/#post-2620169) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics