How to append to menu items selectively

2 Views

I’m making this wordpress theme, and I need to create a menu that is vertical but its submenus are horizontal, like this: 

MenuItem
 SubmenuItem | SubmenuItem 
AnotherMenuItem
 SubmenuItem | SubmenuItem

Now using wp_nav_menu() and CSS I can get this effect, but I don’t have any idea on how to add the pipe symbol to separate the submenu items.

Read More
wp_nav_menu(array(
            'container'=>false,
            'after'=> ' | ',
            'theme_location'=>'home-menu',
            'menu_id'=>'main_nav_left',
            'menu_class'=>'main_link',
        ));

is no good as it will turn out as 

MenuItem |
 SubmenuItem | SubmenuItem |

(adding a | after every item, which is the documented behavior)
I was wondering if there was a way to selectively add the pipe symbol so that it is added only between the submenuitems and not after anything else.
According to WP documentation, there doesn’t seem to be a built-in method to support this.

So what is the best way to accomplish this effect (without editing wp core code)?

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. This is another case where a pure-CSS definition will work. For example:

    #main_nav_left li:after {
    content: ' | ';
}
#main_nav_left li:last-child:after {
    content: '';
}