[resolved] Separator between menu items (10 posts)

  1. kitory
    Posted 5 years ago #

    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.

  2. esmi
    Forum Moderator
    Posted 5 years ago #

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

  3. kitory
    Posted 5 years ago #

    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?

  4. esmi
    Forum Moderator
    Posted 5 years ago #

    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.

  5. kitory
    Posted 5 years ago #

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

  6. esmi
    Forum Moderator
    Posted 5 years ago #

    Glad to have helped. :-)

  7. fmsheikh
    Posted 5 years ago #

    thank you
    but u can apply custom class.

  8. djanym
    Posted 5 years ago #

    It's very easy. I've described it in my blog http://lab.ixblogs.com/razdeliteli-v-menyu-wordpress/ - 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.

  9. shirgans
    Posted 4 years ago #

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

  10. shirgans
    Posted 4 years ago #

    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:
    li.menu-divider:last-child {display:none;}

    Have fun.

Topic Closed

This topic has been closed to new replies.

About this Topic