Support » Themes and Templates » Menu separators

  • Resolved mcrubbin


    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.

    I’m trying to add menu separators, here’s the code I have for the menu in my template:

    <li <?php if(is_home()) echo 'class="current_page_item"'; ?>><a href="<?php echo get_option('home'); ?>/" >Home</a></li>
    <li class="separator">&nbsp;</li>
    <?php wp_list_pages('title_li=&parent=0&') ;?>

    How can I add a menu separator after every menu item (except the last)?

Viewing 15 replies - 1 through 15 (of 17 total)
  • You could use a simple <hr /> 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.

    Where do I add <hr /> in the first place?

    Anywhere you want a horizontal line.

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

    You’re right – my mistake. I was seeing what I wanted to see.

    Thanks for the help anyway 🙂

    Try putting the character you want as a separator between a couple of &nbsp;‘s in your list item:
    <li class="separator">&nbsp;|&nbsp;</li>
    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:

    <nav id="menu" role="navigation">
    	<?php wp_nav_menu( array(
    		'theme_location'  => 'header-menu',
    		'container'	  => '',
    		'menu_id'	  => 'main-nav',
    		'menu_class'	  => '',
    		'before'	  => '<span class="pipe"> | </span>'
    	) ); ?>
    </nav><!-- #menu -->

    The ‘before’ parameter adds the html with the pipe character, I used Jquery to remove it from the first list item.

    Reloading? Hmm…

    Where do I change this code? In my header.php?

    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?

    K . I . S

    I pretty much took everything out of that template and started from scratch.

    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.

    Hmmm, seems ok now – strange.

    Try replacing your wp_list_pages with this:
    <?php wp_list_pages('title_li=&parent=0&link_before=<span class="separator"> | </span>') ;?>
    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;

    Seems like I had the wrong code before.. I should have gave you this in the beginning instead of that other code:

    					if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
                        <?php endif; ?>

    ^^ 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.


    If I do use this:

    <?php wp_list_pages('title_li=&parent=0&link_before=<span class="separator"> | </span>') ;?>

    Is there any way to organize it? Because for me it just set it in alphabetical order with the code above.

    ^^^ 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:

    <?php wp_list_pages('sort_column=menu_order&title_li=&parent=0&link_before=<span class="separator"> </span>') ;?>

    Then I installed: 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;


    Nice work! Maybe you could mark this as resolved?

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Menu separators’ is closed to new replies.