質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 259

score 6

以下の画像のような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のままになっていた。

*試してみたこと2
トグルが動作していないので、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
  }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • Lhankor_Mhy

    2021/01/07 13:48

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

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る