Bootstrap NavBar | WP Bootstrap Navwalker

 step1:

 

step2 :

copy all code

 

step3 :

make file in your theme ( class-wp-bootstrap-navwalker.php )

and 

paste code

 

step 4 : 

copy below code and paste it in ( finctions.php ) file

/**
 * Register Custom Navigation Walker
 */
function register_navwalker(){
    require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );

/**
* Register a navigation menu
*/
function register_primary_menu() {
    register_nav_menu( 'primary', __( 'Primary Menu', 'theme-text-domain' ) );
}
add_action( 'after_setup_theme', 'register_primary_menu' );

 

step5:

copy below code and paste it in ( header.php ) file


    <nav class="navbar navbar-expand-lg navbar-light bg-dark">

        <a class="navbar-brand " href="#">Navbar</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <?php
        wp_nav_menu( array(
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse justify-content-end',
            'container_id'      => 'navbarNavDropdown',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker(),
        ) );
        ?>
    </nav>




 

Comments