Wordpress wp_nav_menu coming extra div tag

Question

When I try to add a new menu to template file, a new div will comes automatically, I dont konw how this comes. Now I want to get without this div.

HTML :

 <nav class="clear-after" id="header-menu">
            <!-- __toggle -->
            <div id="main-menu-toggle"></div>
            <!-- __level 1 -->
            <div class="menu">
  <ul>
    <li class="page_item page-item-22"><a href="http://localhost/one2one/index.php/blog/">Blog</a></li>
<li class="page_item page-item-8 page_item_has_children"><a href="http://localhost/one2one/index.php/company/">Company</a></li>
<li class="page_item page-item-20"><a href="http://localhost/one2one/index.php/contact/">Contact</a></li>
<li class="page_item page-item-6 current_page_item"><a href="http://localhost/one2one/">Home</a></li>
<li class="page_item page-item-18"><a href="http://localhost/one2one/index.php/services/">Services</a></li>
</ul>
</div>
</nav>

PHP CODE :

  <nav id="header-menu" class="clear-after">
            <!-- __toggle -->
            <div id="main-menu-toggle"></div>
            <!-- __level 1 -->
            <?php
            wp_nav_menu(array(
                'theme_location' => 'main-menu', 
                'container'=>'',
                'container_class' => '',
                'items_wrap'=>'%3$s',
                'menu_id' => 'main-menu'
            ));
            ?>
        </nav>

I want to get like below. need to add a ID & Class and remove the div

<div class="menu">

How can i solve this...

Answer 1

The actual html output contains items with the page_item class. This means Wordpress shows the page fallback menu. The fallback menu contains <div class="menu"> by default in the output.

See the 'fallback_cb' => 'wp_page_menu', option in the default settings from the Wordpress reference . Setting this option to false will disable the fallback menu, but you still need a menu set up in the Wordpress backend.

To fix this, just add a menu in the Wordpress backend via " Appearance > Menu's " and be sure to check the box containing the theme location (in your case probably "Main menu") while you do that. Wordpress then won't use the fallback menu anymore, and your options will apply.

You can recognize the correct menu in the html output by the class menu-item being added to the menu items instead of page_item .

Answer 2

Probably you can try this -

$defaults = array(
    'theme_location'  => '',
    'menu'            => '',
    'container'       => 'div',
    'container_class' => '',
    'container_id'    => '',
    'menu_class'      => 'menu',
    'menu_id'         => '',
    'echo'            => true,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'depth'           => 0,
    'walker'          => ''
);

wp_nav_menu( $defaults );

please check more about wp_nav_menu on wordpress site

Answer 3

You'll need this.

wp_nav_menu(array(
                    'theme_location' => 'main-menu',
                    'container' => 'div',
                    'container_class' => 'menu',
                    'items_wrap' => '<ul>%3$s</ul>'
                ));

Answer 4

Well, the question is TOO OLD, but that may be of help to someone else if he search for a way to remove the extra DIV (like me).

The solution is the 'fallback_cb' argument. When no menu is specified for that theme location, the fallback function gets called. Then, probably the 'container' argument doesn't exist for that callback function or it isn't passed, but this results in an EXTRA DIV.

So the solution in that case would be to make 'fallback_cb' empty string and force the admin to create and associate a menu to that 'theme_location' .