WordPress.org

Ready to get started?Download WordPress

Forums

Add li classes to wp_nav_menu items (6 posts)

  1. jmillspaysbills
    Member
    Posted 4 years ago #

    Hi there. I'm having an issue w/ my wp_nav_menu that I'm hoping is a somewhat easy fix.

    What I was hoping to do was to achieve a menu that looks similar to this:

    page1 | page2 | page 3 | page 4

    I know i can add a "|" after the item via the "after" argument in my nav include, but that gives me a "|" after the last item. But that's not really what I want. I'd

    What I figured I could do would be to add a border-right to all list items, then give the last item a class of "last" and a border-right: 0;

    It would be nice to be able to add a class on each item via the WP back end for all items, because it would enable me to do image replacements, etc via CSS techniques. Maybe next WP release? Who Knows.

    Thanks for your help, guys and gals!

  2. jmillspaysbills
    Member
    Posted 4 years ago #

    anyone?

  3. Darrell Schauss
    Member
    Posted 4 years ago #

    Here is a way with jQuery to remove the very last 'after'.
    http://wordpress.org/support/topic/413518

    You can specify the ul id or a div with an id as mentioned in the post about multiple menus.
    http://codex.wordpress.org/Function_Reference/wp_nav_menu

  4. abban
    Member
    Posted 3 years ago #

    This could be done using CSS. Something similar to:

    #navigation a{
        border-right:1px solid #000; //adds a border to the links in the menu
    }
    #navigation a:last-child{
        border-right:0; //removes the border from the last one
    }
  5. abban
    Member
    Posted 3 years ago #

    Oops I meant:

    #navigation a{
        border-right:1px solid #000; //adds a border to the links in the menu
    }
    #navigation li:last-child a{
        border-right:0; //removes the border from the last one
    }
  6. Devin Walker
    Member
    Posted 3 years ago #

    nice trick abban

Topic Closed

This topic has been closed to new replies.

About this Topic