Add Vertical Bar Between Menu Items

  • Resolved tom92373

    (@tom92373)


    13 years, 2 months ago

    I have a horizontal nav menu using the TwentyTen theme.
    I want to put a vertical bar “|” between the menu items, but not have it on the last menu item (so it is left hanging on the end). I tried doing a border-right using CSS, but it puts the line at the end, after the last menu item.

    Does anyone know how this can be done?

    Here is my current menu: http://173.201.252.209/~aadcpas/

    Thanks in advance!

Viewing 1 replies (of 1 total)
  • adamtinsley

    (@adamtinsley)

    13 years, 2 months ago

    You can do this by placing the individual page links you want in the menu bar instead of using the <?php wp_nav_menu(); ?> function.

    Here’s an example:

    <div id="menu">
<a title="Name" href="http://yoursite.com/yourpage">Name</a> |
<a title="Name" href="http://yoursite.com/yourpage">Name</a> |
<a title="Name" href="http://yoursite.com/yourpage">Name</a>
</div><!--menu-->

    Notice there is no “|” at the end of the last link.

    Then style the menu and links in css:

    #menu {
}
    #menu a, a:hover {
}

    Replace “yoursite.com/yourpage” with the link to your page and “Name” with the text you want displayed. title=”Name” controls what is displayed when you hover over the text. You will need to make sure that the url that you use in your href= matches your permalink structure.

Viewing 1 replies (of 1 total)
  • The topic ‘Add Vertical Bar Between Menu Items’ is closed to new replies.