WordPress.org

1. smallwebsolutions
   Member
   Posted 8 months ago #

   Is it possible to add a variable to a wp_nav_menu to show a pipe character ( | ) in between menu items? I've found various solutions for wp_list_pages but not for custom menus.

   Any help would be appreciated.

   Thanks.

   p.s. I'd prefer not to use the border style method via css because my menu goes to two rows.

2. Digital Raindrops
   Member
   Posted 8 months ago #

   In the wp_nav_menu() there are a number of arguments, one of these is:

   'link_after' => ,

   To add the pipe then:
   <?php wp_nav_menu( array( 'theme_location' => 'primary', 'link_after' => '|' ) ); ?>

   If you want to style it padding or margin add a class and a style:
   <?php wp_nav_menu( array( 'theme_location' => 'primary', 'link_after' => '<span class="my-span">|</span>' ) ); ?>

   Twenty Eleven style.css changes, remove the 1.2125em padding and add a margin.
   

   #access a {
       padding-right: 0;
   }
   .my-span{
   	float:right;
   	margin-left: 1.2125em;
   }

   This solution is only the same height of the text, problem is child item also have the pipe!.

   For other readers css version:
   To make it menu height then add to style.css, this is based on twenty ten or twenty eleven.
   

   #access li {
   	border-right: solid 1px #ccc;
   }

   HTH

   David

3. smallwebsolutions
   Member
   Posted 8 months ago #

   David,

   Many, many thanks. Is there a resource page that lists all of the arguments for wp_nav_menu?

   Jackie

4. smallwebsolutions
   Member
   Posted 8 months ago #

   Never mind, just found it:

   http://codex.wordpress.org/Function_Reference/wp_nav_menu

   Thanks again!

Reply

You must log in to post.