Bootstrap 4 Navbar切换中断

Question

I am currently doing some responsive work on a new Wordpress site I am building. It is a custom theme built on Underscores and so I have included the bootstrap files for use on the navbar and grid columns. All the bootstrap functions are working correctly, only when my navbar drops down into tablet view (with the menu items hidden and the toggle button showing), when the page is loaded, the navbar loads opened and then when the toggle button is clicked, it slides up and immediately reopens again.

The classes applied to the navbar when the page loads are:

<div class="navbar-collapse collapse">

And then once the navbar toggle is clicked:

<div class="navbar-collapse collapse in">

I have no console errors so i'm a little stuck. Here is a GIF to show whats happening:

Any help would be greatly appreciated!

Full NavBar Code, please note that the navigation links are being loaded by the wp_nav_menu() function in WordPress.

<nav id="site-navigation" class="main-navigation navbar navbar-expand-lg">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation-bar" aria-controls="navigation-bar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="nav-right">
        <a href="tel:0"><img src="/assets/uploads/Navbar-Icon-Phone.png" alt="Call Omicron Solutions"></a>
        <a href="mailto:lewis@email.com"><img src="/assets/uploads/Navbar-Icon-Email.png" alt="Email Omicron Solutions"></a>
    </div>
    <div class="collapse navbar-collapse" id="navigation-bar">
        <div class="menu-main-menu-container">
            <ul id="menu-main-menu" class="menu navbar-nav mr-auto mt-2 mt-lg-0">
                <li id="menu-item-128" class="nav-item menu-item menu-item-type-custom menu-item-object-custom menu-item-128">
                    <a href="index.php"><img src="/assets/uploads/Navbar-Icon-Home.png" alt="Home"></a>
                </li>
                <li id="menu-item-29" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-29">
                    <a href="http://localhost/about/">About</a>
                </li>
                <li id="menu-item-28" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-28">
                    <a href="http://localhost/services/">Services</a>
                </li>
                <li id="menu-item-27" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-27">
                    <a href="http://localhost/case-studies/">Case Studies</a>
                </li>
                <li id="menu-item-26" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-26">
                    <a href="http://localhost/news/">News</a>
                </li>
                <li id="menu-item-25" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-25">
                    <a href="http://localhost/contact-us/">Contact Us</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

Solved! The problem was that I had a Page Builder plugin installed that called in Bootstrap 3. I completely missed this in the source and so I had Bootstrap 3 & 4 fighting over control for the navbar.

Note to self: Always check for duplicate bootstrap includes if using plugins.