Bootstrapでナビゲーションバーが表示されない

ナビゲーションバーを正しく表示させたい

Bootstrapでサイト作りの練習をしています。ヘッダーから作成しているのですが、ナビゲーションバーが正しく表示できません。
色々調べたのですが、解決できるような答えが見つかりませんでした。

１. ナビゲーションナビをヘッダーの写真の上部に表示させたい。
２. ナビゲーションナビのMr.MCOFFEEの右側にナビゲーションメニューが表示されない。

サイズが小さくなると表示される。

サイズを小さくしてメニューを開くと
)
表示される。

コードはこちらです。

Bootstrap
1<!doctype html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
7    <title>カフェ　Mr. M COFFEE</title>
8  </head>
9  <body>
10    <div class="container text-center">
11    <h1>Mr. M COFFEE</h1>
12    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
13    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
14    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
15
16   
17    <!-- header -->
18     <header class="py-4">
19      <img src="gazou/c2cd16d0a7f926968200d5d809ec9f9e_s.jpg" alt="Mr. M COFFEE"></a>
20      </div>
21       </header>
22    <!-- nav -->
23     <nav>
24      <!--ナビゲーションバー-->
25　　　　<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
26        <div class="container">
27          <!--サブコンポーネント-->
28        <a class="navbar-brand" href="index.html">Mr. M COFFEE</a>
29        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
30          <span class="navbar-toggler-icon"></span>
31        </button>
32        <!--ナビゲーションー-->
33         <div class="collapse navbar]-collapse" id="navbar-content">
34           <!--ナビゲーションメニュー-->
35           <ul class="navbar-nav" mr-auto>
36             <li class="nav-item active">
37              <a class="nav-link" href="#">Top <span class="sr-only">(current)</span></a>
38              </li>
39             <li class="nav-item">
40               <a class="nav-link" href="#">About</a>
41             </li>
42             <li class="nav-item">
43               <a class="nav-link" href="#">Menu</a>
44             </li>
45             <li class="nav-item">
46               <a class="nav-link" href="#">Coupon</a>
47             </li>
48            <li class="nav-item">
49               <a class="nav-link" href="#">information</a>
50             </li>
51           </ul>
52        <!--右側のメニュー：Contactページへのリンク-->
53       <ul class="navbar-nav">
54         <li class="nav-item">
55           <a href="contact.html" class="nav-link btn btn-info">Contact</a>
56         </li>
57       </ul>
58        <!--ドロップダウン-->
59        <li class="nav-item dropdown">
60         <a  class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Information
61         </a>
62        <div class="dropdown-menu" aria-labeliedby="navbarDropdown">
63        <a class="dropdown-item" href="#">Shop</a>
64        <a class="dropdown-item" href="#">Access</a>
65        </div>
66        </li>
67      </div>
68    </div>
69  </nav>
70</nav>
71 
72     <!-- main -->
73     <main>
74      <!--メインビジュアル-->
75       <div class="py-4">
76　　　　　<div class="container">
77         <!--カルーセル外枠-->
78         <div id="main_visual" class="carusel slide" data-ride="carusel">
79          <!--インジゲーター-->
80          <ol class="carusel-indicators">
81　　　　　　各インジゲーター
82          </ol>
83          <!--カルーセル内枠-->
84          <div class="carusel-inner">
85            <div class="carusel-item">
86              
87            </div>
88            
89          </div>
90           
91         </div>
92
93
94        </div>
95
96         
97       </div>
98     <!--コンテンツ01-->
99       <div class="py-4">
100
101       </div>
102     <!--コンテンツ02-->
103       <div class="py-4">
104         
105       </div>
106     <!--コンテンツ03-->
107       <div class="py-4">
108
109       </div>
110     <!--コンテンツ04-->
111       <div class="py-4">
112
113       </div>
114     <!--コンテンツ05-->
115       <div class="py-4">
116
117       </div>
118      </main>
119     <!--フッター-->
120      <footer class="py-4">
121        
122      </footer>
123
124 </body>
125</html>
126
127

コードを見直したり、調べたりしたのですがわかりませんでした。
よろしくお願いいたします。

kei344

2019/03/05 17:32

（質問文は編集できます）コードはスクリーンショットでなくコードブロックにテキストでお書きください。また、Bootstrapはバージョンも提示してください。

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

回答1件

ベストアンサー

以下の修正を行うことで、質問者さんの実現したいことは行えると思います(動作確認用リンク)。

header要素のimg要素よりも上にnav要素を移動
img要素末尾のa要素, div要素の終了タグを削除
img要素にimg-fluidクラスを付与
2 重でnav要素が書かれているので、一方を削除
#navbar-contentが付与された要素のnavbar]-collapseクラスをnavbar-collapseクラスに修正
ドロップダウンのli要素をnavbar-navクラスを付与したul要素で囲む
#navbar-contentが付与された要素内の最初のul要素に付与されたmr-auto属性を削除し、mr-autoクラスを付与する

HTML
1<!doctype html>
2<html lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
8  <title>カフェ　Mr. M COFFEE</title>
9</head>
10
11<body>
12  <div class="container text-center">
13    <h1>Mr. M COFFEE</h1>
14    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
15    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
16    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
17
18    <!-- header -->
19    <header class="py-4">
20      <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
21        <div class="container">
22          <!--サブコンポーネント-->
23          <a class="navbar-brand" href="index.html">Mr. M COFFEE</a>
24          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
25          <span class="navbar-toggler-icon"></span>
26        </button>
27          <!--ナビゲーションー-->
28          <div class="collapse navbar-collapse" id="navbar-content">
29            <!--ナビゲーションメニュー-->
30            <ul class="navbar-nav mr-auto">
31              <li class="nav-item active">
32                <a class="nav-link" href="#">Top <span class="sr-only">(current)</span></a>
33              </li>
34              <li class="nav-item">
35                <a class="nav-link" href="#">About</a>
36              </li>
37              <li class="nav-item">
38                <a class="nav-link" href="#">Menu</a>
39              </li>
40              <li class="nav-item">
41                <a class="nav-link" href="#">Coupon</a>
42              </li>
43              <li class="nav-item">
44                <a class="nav-link" href="#">information</a>
45              </li>
46            </ul>
47            <!--右側のメニュー：Contactページへのリンク-->
48            <ul class="navbar-nav">
49              <li class="nav-item">
50                <a href="contact.html" class="nav-link btn btn-info">Contact</a>
51              </li>
52            </ul>
53            <!--ドロップダウン-->
54            <ul class="navbar-nav">
55              <li class="nav-item dropdown">
56                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Information
57         </a>
58                <div class="dropdown-menu" aria-labeliedby="navbarDropdown">
59                  <a class="dropdown-item" href="#">Shop</a>
60                  <a class="dropdown-item" href="#">Access</a>
61                </div>
62              </li>
63            </ul>
64          </div>
65        </div>
66      </nav>
67      <img src="http://placehold.jp/ffff88/ffffff/800x600.png?text=gazou/c2cd16d0a7f926968200d5d809ec9f9e_s.jpg" alt="Mr. M COFFEE" class="img-fluid">
68  </div>
69  </header>
70  <!-- nav -->
71
72  <!-- main -->
73  <main>
74    <!--メインビジュアル-->
75    <div class="py-4">
76
77      <div class="container">
78        <!--カルーセル外枠-->
79        <div id="main_visual" class="carusel slide" data-ride="carusel">
80          <!--インジゲーター-->
81          <ol class="carusel-indicators">
82            各インジゲーター
83          </ol>
84          <!--カルーセル内枠-->
85          <div class="carusel-inner">
86            <div class="carusel-item">
87
88            </div>
89
90          </div>
91
92        </div>
93
94      </div>
95
96    </div>
97    <!--コンテンツ01-->
98    <div class="py-4">
99
100    </div>
101    <!--コンテンツ02-->
102    <div class="py-4">
103
104    </div>
105    <!--コンテンツ03-->
106    <div class="py-4">
107
108    </div>
109    <!--コンテンツ04-->
110    <div class="py-4">
111
112    </div>
113    <!--コンテンツ05-->
114    <div class="py-4">
115
116    </div>
117  </main>
118  <!--フッター-->
119  <footer class="py-4">
120
121  </footer>
122
123</body>
124
125</html>