Bootstrap 4 Navbar Toggle Broken

April 26, 2018, at 5:31 PM

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>
    <div class="nav-right">
        <a href="tel:0"><img src="/assets/uploads/Navbar-Icon-Phone.png" alt="Call Omicron Solutions"></a>
        <a href=""><img src="/assets/uploads/Navbar-Icon-Email.png" alt="Email Omicron Solutions"></a>
    <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 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 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 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 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 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>
How to change row color in JQuery Datatable

How to change row color in JQuery Datatable

Problem Statement: change the color of the table row, with respect to status:

Paypal Express Checkout error 400 - payment.Button javascript

Paypal Express Checkout error 400 - payment.Button javascript

I'm trying to pay with paypal using Express checkout button, for a few days it worked just as expected but not until latelyIt just keeps on returning error 400 (Bad Request) with this response:

Updating an array for jQuery fade in and fade out with setInterval

Updating an array for jQuery fade in and fade out with setInterval

I am trying to create a fade in/out effect with a array elements that change with timeThe array will be updated by a function that fetches the array items from a external source on an hourly basis

Randomize Hex Color Avoiding Light colors

Randomize Hex Color Avoiding Light colors

Is there a simple way to randomize hex color but avoiding very light colors? For example white, very light yellows,greens,blues,etc