boostrap4を利用したnavbarが特定のウィンドウサイズでうまく表示できない

Question

以下の画像のようなnavbarをboostrap4を使用して作成しました。
正確にいうと、以下のboostrap4を使用したサイトのレイアウトを使用しています。
https://htmlstream.com/preview/stream-ui-kit/

PC様画面(ウィンドウサイズが992px~)

スマホ用画面(ウィンドウサイズが~767px)

しかし、767px~991pxの間だけ、以下の様にトグルが開いた状態がデフォルトとなり、トグルボタンを押しても開いてくれません。

以下の様にお手本としたレイアウトと見比べてみたのですが、どこがこの現象を引き起こしてしまっているのかわかりません。
お手数ですが、手助けしていただければ幸いです。よろしくお願いいたします。

＊試してみたこと1
https://masup.net/2018/10/common-mistake-when-use-aria-expanded
このサイトの情報を元に、aria-hidden="true"を追加してみたが変化なし。
また、aria-expanded="false"は、トグルが開いた状態で表示となっている767px~991pxのウィンドウサイズでfalseのままになっていた。

＊試してみたこと２
トグルが動作していないので、jQueryで以下のコードを追加したが、効果なし。

    <script>
      $('.navbar-nav>li>a').on('click', function(){
        $('.navbar-collapse').collapse('hide');
      });
    </script>

表示中のnavbarのhtml

 <header>
  <nav class="js-navbar-scroll navbar fixed-top navbar-expand-lg navbar-dark" style="background-color :rgba(98, 42, 136, 0.7); width:100%;">
    <div class="container-fluid">
          <div class="navbar-brand">
            <%= link_to root_path do %>
              <%= image_tag 'zimotoai.png', size: "280x80", alt: "地元あい", class: "none" %>
            <% end %>
          </div>

      <button class="navbar-toggler" type="button"
        data-toggle="collapse"
        data-target="#navbarTogglerDemo"

        aria-controls="navbarTogglerDemo"
        aria-expanded="false"
        aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarTogglerDemo" aria-hidden="true">
        <ul class="navbar-nav ml-auto mt-0">
          <li class="nav-item mr-4 mb-0">
            <%= link_to 'ホーム', root_path, class: "nav-link active" %>
          </li>
          <li class="nav-item mr-4 mb-0">
            <%= link_to 'サービス紹介', about_path, class: "nav-link active"  %>
          </li>
          <li class="nav-item mr-4 mb-0">
            <%= link_to '思い出シェア', contact_path, class: "nav-link active"  %>
          </li>
          <% if logged_in? %>
            <li class="nav-item mr-4 mb-0">
            <%= link_to '私の思い出', current_user, class: "nav-link active"  %>
            </li>
            <%=button_to 'ログアウト', "/logout", method: :delete, class: "btn btn-primary" %>
          <% else %>
          <li class="nav-item mr-4 mb-0">
            <%= link_to '無料登録', signup_path, class: "nav-link active"  %>
          </li>
            <%=link_to 'ログイン', login_path, class: "btn btn-primary" %>
          <% end %>
        </ul>
      </div>
    </div>
  </nav>
</header>

元にしたsteam.ui_kitのhtml

   <header role="header">
      <!-- Navbar -->
      <nav class="js-navbar-scroll navbar fixed-top navbar-expand-lg navbar-transparent navbar-dark">
        <div class="container-fluid">
          <a class="navbar-brand" href="index.html">
            <img src="assets/img/logo-white.png" alt="Stream UI Kit" style="width: 100px;">
          </a>

          <button class="navbar-toggler" type="button"
                  data-toggle="collapse"
                  data-target="#navbarTogglerDemo"

                  aria-controls="navbarTogglerDemo"
                  aria-expanded="false"
                  aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarTogglerDemo">
            <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
              <li class="nav-item mr-4 mb-2 mb-lg-0">
                <a href="#js-scroll-to-section" class="nav-link" href="#!">
                  <i class="fas fa-cubes u-font-size-90 mr-1"></i> UI Kit Components
                </a>
              </li>
              <li class="nav-item mr-4 mb-2 mb-lg-0">
                <a class="nav-link" href="#js-scroll-to-demos">
                  <i class="fas fa-cube u-font-size-90 mr-1"></i> Example Pages
                </a>
              </li>
              <li class="nav-item mr-4 mb-2 mb-lg-0">
                <a class="nav-link" href="https://htmlstream.com/public/preview/stream-ui-kit/docs.html">
                  <i class="fas fa-book u-font-size-90 mr-1"></i> Docs
                </a>
              </li>
            </ul>
            <div>
              <a class="btn btn-primary" href="https://htmlstream.com/templates/stream-ui-kit">
                <i class="fas fa-cloud-download-alt mr-1"></i> Download
              </a>
            </div>
          </div>
        </div>
      </nav>
      <!-- End Navbar -->

stream.ui_kitからそのまま使用しているcss（該当箇所のみ）

/*----------------------------------
  Header
------------------------------------*/
@media (max-width: 767px) {
  .navbar-expand-sm.fixed-top {
    background-color: rgba(27, 30, 36, 0.3);
  }
}

@media (max-width: 991px) {
  .navbar-expand-md.fixed-top {
    background-color: rgba(27, 30, 36, 0.3);
  }
}

@media (max-width: 1199px) {
  .navbar-expand-lg.fixed-top {
    background-color: rgba(27, 30, 36, 0.3);
  }
}

.navbar-bg-onscroll.fixed-top {
  background-color: #672e8d;
  transition: all .3s ease-out;
}

.navbar-bg-onscroll.fixed-top--fade {
  transition: all .4s ease-out;
}

追加したcss

.navbar-brand{
  position: absolute;
  top: 0px;
  left: 0px;
}

@media screen and (max-width: 991px){
.none {
  display:none
  }
}

Comments

[Lhankor_Mhy]

コードをご提示ください。