画面サイズがmdになった際にナビメニューをハンバーガー表示にし、それと同時にそのハンバーガーメニューをbrandの下部に設置したい

前提・実現したいこと

bootstrap4.5,HTMLでwebデザインの練習をしている初心者で、
teratailでの質問は初めてですのでお手柔らかにお願い致します。

nav,navberについて質問があります。
画面サイズがmdになった際にナビメニューをハンバーガー表示、
同時にハンバーガーメニューとfacebook,instボタンをロゴ(brand)の下部に設置したいのですが、
どのようにコードを書き換えればよいのでしょうか。
よろしくお願いいたします。

現在のHTMLコード

下記のコードですと画面サイズが小さくなった時にハンバーガー,FB,instが横並びになり、
さらに小さくなると順番にアイテムがロゴの下に降りていきます。
サイズの縮小に応じて1つずつ下段にいくのではなく、
mdサイズ以下で同時に３アイテムを下段に移動させたいです。

html
1<nav class="navbar navbar-expand-md navbar-light bg-light p-5 mx-5">
2  <a class="navbar-brand " href="index.html"><img class"w-16" src="img/logo.png" alt=""></a>
3  
4  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
5    <span class="navbar-toggler-icon"></span>
6  </button>
7
8  <div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02">
9    <ul class="navbar-nav">
10      <li class="nav-item px-3">
11        <a><img class"login" src="img/menu_login.png" alt="login"></a>
12      </li>
13      <li class="nav-item px-3">
14        <a><img class"cart" src="img/menu_cart.png" alt="cart"></a
15      </li>
16      <li class="nav-item px-3">
17        <a><img class"mypage" src="img/menu_mypage.png" alt="my page"></a
18      </li>
19      <li class="nav-item px-3">
20        <a><img class"guide" src="img/menu_guide.png" alt="shopping guide"></a
21      </li>
22    </ul>
23    </div>
24    <span class="navbar-facebook px-2 ">
25     <img class"fb" src="img/facebook.png" alt="facebook">
26    </span>
27    <span class="navbar-insta px-2 ">
28      <img class"insta" src="img/insta.png" alt="instagram">
29    </span>
30  
31</nav>

行動規範の内容に同意します

回答1件

ベストアンサー

細かい部分はわかりませんが、
「画面サイズがmdになった際にナビメニューをハンバーガー表示、
同時にハンバーガーメニューとfacebook,instボタンをロゴ(brand)の下部に設置」ということだけを
考えれば

html
1<nav class="navbar navbar-expand-md navbar-light bg-light p-5 mx-5">
2  <a class="navbar-brand " href="index.html"><img class"w-16" src="img/logo.png" alt=""></a>
3
4  
5
6  <div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02">
7    <ul class="navbar-nav">
8      <li class="nav-item px-3">
9        <a><img class"login" src="img/menu_login.png" alt="login"></a>
10      </li>
11      <li class="nav-item px-3">
12        <a><img class"cart" src="img/menu_cart.png" alt="cart"></a
13      </li>
14      <li class="nav-item px-3">
15        <a><img class"mypage" src="img/menu_mypage.png" alt="my page"></a
16      </li>
17      <li class="nav-item px-3">
18        <a><img class"guide" src="img/menu_guide.png" alt="shopping guide"></a
19      </li>
20    </ul>
21    </div>
22        <div class="sample">
23        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
24    <span class="navbar-toggler-icon"></span>
25  </button>
26    <span class="navbar-facebook px-2 ">
27     <img class"fb" src="img/facebook.png" alt="facebook">
28    </span>
29    <span class="navbar-insta px-2 ">
30      <img class"insta" src="img/insta.png" alt="instagram">
31    </span>
32          </div>
33
34</nav>

css
1@media (max-width: 767.98px) {
2  nav {
3    display: block !important;
4  }
5}

または

css
1.navbar {
2    flex-flow: column;
3}

このような書き方で実現すると思います。
ただ、背景色が設定されている中から出したいとかになると、書き方も変わります。

・簡単な説明
1.トグルボタンを下に移動
2.折り返したい部分をdivで囲う
3.cssを設定する

cssを2種類提示していますが、
どちらも３アイテムは折り返すようになります。
flex-flow: column;はもともと.navbarにalign-items: center;が設定されているので
中央寄せになると思います。
左に寄せる場合は

css
1.navbar {
2    flex-flow: column;
3    align-items:flex-start;
4}

で左寄せにできます。

投稿2020/09/14 04:22

総合スコア716

2020/09/14 07:42

回答ありがとうございます。教えていただいた内容（navのｃｓｓを設定）を実行したところ、 3つのアイテムが同時に折り返すようになりましたが、折り返す前の画面サイズで（487～761px）すでにハンバーガーメニューになってしまいます。この範囲の間ハンバーガーメニューではなく通常の横並びメニューを表示する方法はありますか？