以下の画像のようなnavbarをboostrap4を使用して作成しました。正確にいうと、以下のboostrap4を使用したサイトのレイアウトを使用しています。 [https://htmlstream.com/preview/stream-ui-kit/](https://htmlstream.com/preview/stream-ui-kit/) PC様画面(ウィンドウサイズが992px~) ![イメージ説明](81f878c0b3a5503813de2a84d914fa21.png) スマホ用画面(ウィンドウサイズが~767px) ![イメージ説明](f452e2d023fe88889df999745d283710.png) しかし、767px~991pxの間だけ、以下の様にトグルが開いた状態がデフォルトとなり、トグルボタンを押しても開いてくれません。 ![イメージ説明](fda3200b3a3ce2b99a529409c10de030.png) 以下の様にお手本としたレイアウトと見比べてみたのですが、どこがこの現象を引き起こしてしまっているのかわかりません。お手数ですが、手助けしていただければ幸いです。よろしくお願いいたします。＊試してみたこと1 [https://masup.net/2018/10/common-mistake-when-use-aria-expanded](https://masup.net/2018/10/common-mistake-when-use-aria-expanded) このサイトの情報を元に、aria-hidden="true"を追加してみたが変化なし。また、aria-expanded="false"は、トグルが開いた状態で表示となっている767px~991pxのウィンドウサイズでfalseのままになっていた。＊試してみたこと２トグルが動作していないので、jQueryで以下のコードを追加したが、効果なし。 ``` ``` ``` 表示中のnavbarのhtml

<%= link_to 'ホーム', root_path, class: "nav-link active" %>
<%= link_to 'サービス紹介', about_path, class: "nav-link active" %>
<%= link_to '思い出シェア', contact_path, class: "nav-link active" %>
<%= link_to '私の思い出', current_user, class: "nav-link active" %>
<%= link_to '無料登録', signup_path, class: "nav-link active" %>

``` ``` 元にしたsteam.ui_kitのhtml

``` ``` 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 } } ```

	@@ -1 +1 @@
1	- boostrap4を利用したnavbarが特定のメディアでうまく表示できない
1	+ boostrap4を利用したnavbarが特定のウィンドウサイズでうまく表示できない

質問編集履歴