How to Wrap a Wordpress Sub menu with DIV

When you are Converting HTML to Wordpress you are oftentimes suffer from this.
The Sub menu of your main navigation containing <div> wrapper in your sub menu (Second Level Menu).

Here is the Solutions , You Have Just add Some Code in Your function.php File and Set Walker parameter for your wp_nav_menu() tag.

eg.
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a>
<div>
<ul class="submenu">
<li><a href="#">Sub Menu1</li>
<li><a href="#">Sub Menu2</li>
<li><a href="#">Sub Menu3</li>
</ul>
</div>
</li>
</ul>

Here Child Navigation Contain div Wrapper. How Can We Handle this with Wordpress Menu.

Add Following Lines in Your function.php File

class Child_Wrap extends Walker_Nav_Menu
{
   function start_lvl(&$output, $depth)
   {
       $indent = str_repeat("\t", $depth);
       $output .= "\n$indent<div class=\"custom-sub\"><ul class=\"sub-menu\">\n";
   }
   function end_lvl(&$output, $depth)
   {
       $indent = str_repeat("\t", $depth);
       $output .= "$indent</ul></div>\n";
   }} 

Now Just Set Your Menu Walker. From Your Header.php file where your wp_nav_menu is located.

  <?php

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

wp_nav_menu( $defaults );

?>                               


Thats All,

Now you can see Your submenu is wrapped with div tag.