Bootstrap navbar is not working correctly with wordpress

Question

I am working on WordPress custom theme using Bootstrap 4.I checked all the connection i.e. bootstrap CSS and js is connected. Another bootstrap code if I add it to the theme is working fine.

The issue is with Navigation.The navigation is not showing correctly. If you look to the above image it is showing the navigation not is right design.

The code which I am using is given

<header class="site-header" role="banner">
        <div class="navbar-wrapper">
            <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <?php if ( get_theme_mod( 'theme_wordpress_logo' ) ): ?>
                        <a href="<?php echo esc_url( home_url( '/' )); ?>">
                            <img src="<?php echo esc_attr(get_theme_mod( 'theme_wordpress_logo' )); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
                        </a>
                    <?php else : ?>
                        <a class="site-title" href="<?php echo esc_url( home_url( '/' )); ?>"><?php esc_url(bloginfo('name')); ?></a>
                    <?php endif; ?>
                    </div> <!-- navbar-header -->

                    <div class="navbar-collapse collapse">
                    <?php
                        wp_nav_menu(array(
                            'theme_location'    => 'primary',
                            'container'       => 'nav',
                            'container_class' => 'navbar-collapse collapse',
                            'menu_class'      => 'nav navbar-nav navbar-right',
                            'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
                            'walker'          => new wp_bootstrap_navwalker()
                        ));
                    ?>
                    </div><!-- navbar-collapse -->
                </div>
            </div>
        </div><!-- navbar-wrapper -->
    </header><!-- Header -->

Answer 1

If you are using Bootstrap 4, change your code to:

   <nav class="navbar navbar-topbar navbar-expand-xl navbar-dark bg-primary">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        &#9776;
    </button>
    <div class="collapse navbar-toggleable-xs" id="collapsingNavbar">
        <a class="navbar-brand" href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a>
        <?php
            wp_nav_menu( array(
            'theme_location' => 'primary',
            'container'      => false,
            'menu_class'     => 'nav navbar-nav',
            'fallback_cb'    => 'wp_bootstrap_navwalker::fallback',
            'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
            'depth'          => 2,
            'walker'         => new wp_bootstrap_navwalker()
        ) );
        ?>
        <?php get_template_part('navbar-search'); ?>
    </div>
    </nav>