Full Dynamic Twitter Bootstrap Navigation (on Hover) Function on dropdown for WordPress

Add This coding in Function.php

add_action( 'after_setup_theme', 'wpt_setup' );

    if ( ! function_exists( 'wpt_setup' ) ):

        function wpt_setup() { 

        register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );

 } endif;

function wpt_register_js() {

    wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery');

    wp_enqueue_script('jquery.bootstrap.min');

}

add_action( 'init', 'wpt_register_js' );

function wpt_register_css() {

    wp_register_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css' );

    wp_enqueue_style( 'bootstrap' );

}

add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

    require_once('wp_bootstrap_navwalker.php');

 

Download wp_bootstrap_navwalker From  GET HUB  add added into theme folder

Add this coding in header.php

 <?php
            wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
        'container_id'      => 'bs-example-navbar-collapse-1',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>

and remove div with collapse navbar-collapse.

To add dropdown for submenu on hover.

add

.dropdown:hover .dropdown-menu {
display: block;
}

into bootstrap.css

Our submenus are now showing on hover, but our dropdown main menu href is showing #. For showing our menu link on dropdown go to wp_bootstrap_navwalker.php file

Search for $atts[‘href’] and then replace # with $item->url;

and Remove $atts[‘data-toggle’]    = ‘dropdown’;

All is ready now.