Support » Themes and Templates » Separator between menu items

  • Resolved kitory


    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


    Forum Moderator

    Generate list for menus and then add a right-hand border to the li elements via CSS.

    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?



    Forum Moderator

    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.

    Thanks so much!
    I was nearly getting mad about it! 🙂
    You saved me!



    Forum Moderator

    Glad to have helped. 🙂

    thank you
    but u can apply custom class.

    It’s very easy. I’ve described it in my blog – but it’s on Russian language.
    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.

    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:

                    jQuery('ul#menu-footer li:not(:last)').after('<li class="footer-divider">|</li>');

    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…)

    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: {display:none;}

    Have fun.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Separator between menu items’ is closed to new replies.