My wp_nav_menu is putting the classes in the wrong element

I am currently learning to create WordPress themes, however I have come across an issue.

When I apply this to my header.php

<?php
  wp_nav_menu( array(

    'theme_location'	  => 'primary',
    'container'			    => 'nav',
    'container_class'	  => 'navbar-collapse collapse',
    'menu'				      => 'div',
    'menu_class'		    => 'nav navbar-nav navbar-right',
    'menu_id'			      => 'menu-main-menu'

  ) );
?>

The menu_class and menu_id, are being added to the wrong html element. Instead of being added to my ‘ul’ element, it gets added to the parent tag, which is a div. Causing my css styles not to work properly.

That PHP outputs it like –

<div class="container-fluid">

  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span><i class="glyphicon glyphicon-chevron-down"></i> Menu</span>
    </button>
    <img src="http://localhost:8888/wp-content/themes/ambermay/assets/img/logo_icon.svg" class="navbar-brand"><span class="logo_name">Amber May</span>
  </div>

  <nav id="menu-main-menu" class="nav navbar-nav navbar-right">
    <ul>
      <li class="page_item page-item-14"><a href="http://localhost:8888/blog/">Blog</a></li>
      <li class="page_item page-item-9"><a href="http://localhost:8888/design/">Design</a></li>
      <li class="page_item page-item-5 current_page_item"><a href="http://localhost:8888/">Illustration</a></li>
      <li class="page_item page-item-16"><a href="http://localhost:8888/info/">Info</a></li>
      <li class="page_item page-item-12"><a href="http://localhost:8888/shop/">Shop</a></li>
    </ul>
  </nav>

</div>

When it should output it like this –

<div class="container-fluid">

  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span><i class="glyphicon glyphicon-chevron-down"></i> Menu</span>
    </button>
    <img src="http://localhost:8888/wp-content/themes/ambermay/assets/img/logo_icon.svg" class="navbar-brand"><span class="logo_name">Amber May</span>
  </div>

  <nav class="navbar-collapse collapse">
    <ul id="menu-main-menu" class="nav navbar-nav navbar-right">
      <li class="page_item page-item-14"><a href="http://localhost:8888/blog/">Blog</a></li>
      <li class="page_item page-item-9"><a href="http://localhost:8888/design/">Design</a></li>
      <li class="page_item page-item-5 current_page_item"><a href="http://localhost:8888/">Illustration</a></li>
      <li class="page_item page-item-16"><a href="http://localhost:8888/info/">Info</a></li>
      <li class="page_item page-item-12"><a href="http://localhost:8888/shop/">Shop</a></li>
    </ul>
  </nav>

</div>

Read more here: My wp_nav_menu is putting the classes in the wrong element

Leave a Reply

Your email address will not be published. Required fields are marked *