Bootstrap 4 Navbar Toggle Broken

Question

В настоящее время я работаю над новым сайтом Wordpress, который я создаю. Это пользовательская тема, построенная на Underscores, поэтому я включил файлы начальной загрузки для использования в столбцах navbar и grid. Все функции начальной загрузки работают правильно, только когда моя навигационная панель опускается в представление планшета (со скрытыми элементами меню и показом переключателя), когда страница загружается, открывается навигационная панель, а затем, когда нажимается кнопка переключения, она скользит вверх и сразу же снова открывается.

Классы, применяемые к панели навигации при загрузке страницы:

<div class="navbar-collapse collapse">

А затем, когда нажата кнопка-переключатель:

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

У меня нет ошибок консоли, поэтому я немного застрял. Вот GIF, чтобы показать, что происходит:

Любая помощь будет принята с благодарностью!

Полный код NavBar, обратите внимание, что навигационные ссылки загружаются функцией wp_nav_menu() в 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

Решено! Проблема заключалась в том, что у меня был установлен плагин Page Builder, который вызывал Bootstrap 3. Я полностью пропустил это в исходном коде, и поэтому Bootstrap 3 и 4 боролись за контроль над панелью навигации.

Примечание для себя: при использовании плагинов всегда проверяйте наличие дубликатов загрузки.