Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

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

share|improve this question

1 Answer 1

up vote 1 down vote accepted

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: '';
}
share|improve this answer
    
Thanks, I never knew CSS could edit content. How cross-browser-friendly is this though? –  Jabbany Jul 25 '11 at 4:26
    
Browser support is actually pretty good for the :before and :after pseudo-elements. –  Chip Bennett Jul 25 '11 at 11:01
    
I see, I'm using it now and it works like a charm! –  Jabbany Jul 30 '11 at 18:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.