How to create a Bootstrap WordPress Theme dynamic submenu - Step 7

In this tutorial, we will learn how to add sub menu. Previous tutorial -> http://1wmedia.blogspot.in/2016/03/how-to-create-bootstrap-wordpress-theme_15.html


1. First click the following link and get all the code you want -> https://gist.github.com/setola/3765640

2. Add the functions.php code from Extended Walker and add it to your functions.php file and save it.

3. open your header.php.

4. Add depth value and call wp nav walker inside the $args array. (please refer the video)

'depth' => 0,
 'walker' => new BootstrapNavMenuWalker()

and hit save.

5. Now open the style.css and add the following code and save the file.

/* dropdown */
.dropdown-menu {
    margin: 0px auto;
}
.dropdown-menu .dropdown-menu {
    left: 100%;
    top: 0px;
}
/*  shows the dropdown on hover*/
.navbar ul.nav li:hover > ul.dropdown-menu {
    display: block;  
}
/* before and after */
.navbar .nav > li > .dropdown-menu::before, .navbar .nav > li > .dropdown-menu::after {
    display: none;
}


6. Now get the Javascript code (open-on-mouseover.js ) from this link -> https://gist.github.com/setola/3765640

7. Create a Javascript  file with name(for example extra_js.js) , Put the code and save it inside the js folder in the themes folder.

8. Now call or enqueue the Js file with following code at functions.php .It should ne inside the function newsite_js() (Please refer the video)

wp_enqueue_script( 'extra_js', get_template_directory_uri() . '/js/extra_js.js', array('jquery'), 'booostrap.min.js', '' );

9. Now move to appearance -> menus on the Dashboard -> Add submenus -> Now all submenus will work properly.

10. That's all.

Video Tutorial: