Add a div container in sub menu in wordpress nav menu


We need to use custom, extend two methods start_lvl() and end_lvl().


class WPSE_78121_Sublevel_Walker extends Walker_Nav_Menu
{
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<div class='sm-container'><ul class='sub-menu'>\n";
}
function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul></div>\n";
}
}

Now place in argument in our wp_nav_menu function

wp_nav_menu(
array (
'theme_location' => 'your-theme-location-EDIT-THIS',
'walker' => new WPSE_78121_Sublevel_Walker
)
);

We can also add container using jquery

 

<script>
jQuery( document ).ready(function( ) {
jQuery('nav .megamenu').find('ul.sub-menu').first().wrap('<div class="sm-container" />');
});
</script>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s