WordPress: Add empty list-item to navigation menu

Question

<ul id="menu-primary">
    <li></li>
    <li></li>
    <li></li><li class="stretcher"></li> /* add adjacent to the last menu item */
</ul>

I need to add <li class="stretcher"></li> adjacent to the last menu item exactly as shown, to the menu with id="menu-primary".

(The reason is to remove the whitespace generated in some browsers. Similar to the first answer in this question: Fluid width with equally spaced DIVs)

score 2 · Accepted Answer · answered Sep 06 '13 at 14:07

2

I'd add it with a filter:

add_filter('wp_nav_menu_items', 'add_stretcher', 10, 2);
function add_stretcher($items, $args) {
  if ($args->theme_location == 'primary') {
    $items .= '<li class="stretcher"></li>';
  }
  return $items;
}

answered Sep 06 '13 at 14:07

Matt Gibson

37,886
9
99
128

It's not working. Don't see anything added to the menu. It's not a primary menu registered to the theme, if that makes a difference, I just gave the menu name "primary". – Sunny Sep 06 '13 at 15:01
Temporarily, try losing the "if", and just have `$items .= '

Matt Gibson

Sep 06 '13 at 16:20

Now I see it, but it's not adjacent to the last menu item (as shown above) in the markup. – Sunny Sep 06 '13 at 16:31

Interesting -- perhaps try `$items = rtrim($items) . '

';` instead of `$items .= '

';` to get rid of any whitespace/linefeeds etc. on the existing items? – Matt Gibson Sep 06 '13 at 16:41

score 0 · Answer 2 · edited Jan 01 '14 at 16:37

0

You can add it using jQuery with following code

<script>
   jQuery(document).ready(function(){
      jQuery("#menu-primary li").last().before("<li class="stretcher"></li>");                             
   });
</script>

edited Jan 01 '14 at 16:37

BenMorel

34,448
50
182
322

answered Sep 06 '13 at 13:25

Datta Parad

709
3
11

WordPress: Add empty list-item to navigation menu

2 Answers2

Linked