Q&A
もしこれでもダメだったら画面サイズ等をお教えください。
前提・実現したいこと
BootstrapのNavbarを利用してヘッダー部分を作成したい
発生している問題・エラーメッセージ
画面幅狭い時→ハンバーガーメニュー 画面幅広い時→ハンバーガーメニューを隠して、ヘッダー部分にメニュー項目を羅列 という風にしたいが今は画面幅が狭くても広くてもハンバーガーメニューが表示されてしまっています。
該当のソースコード
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Complete Bootstrap 4 Website Layout</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script> <link href="style.css" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class = "navbar navbar-expend-md navbar-light bg-light sticky-top"> <div class="container-fluid"> <a class="navbar-brand" href="#"><img src="img/logo.png"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> <span class="navbar-toggler-icon"></span> </button> <div class="collaspe navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> </ul> </div> </div> </nav> </body> </html>
試したこと
自分で調べたところ、buttonタグのdata-target属性で指定したidとその下の
<div class="collaspe navbar-collapse" id="navbarResponsive">の id部分を同じにするとボタンとリンクさせることができ、画面幅に応じて自動でハンバーガーメニューが 表示、非表示に切り替わるとのことだったのですが、うまくいきません。 何が原因でうまく行っていないのでしょうか？ ### 補足情報（FW/ツールのバージョンなど）以下の動画を真似て作成中にこの問題が起こりました。
https://www.youtube.com/watch?v=9cKsq14Kfsw
回答2件
0
ベストアンサー
class名、navbar-expand-mdとするところをnavbar-expend-mdと一文字スペルミスしています。
html
1<nav class = "navbar navbar-expend-md navbar-light bg-light sticky-top">
投稿2020/03/08 13:23
編集2020/03/08 13:28
総合スコア757
0
HTML
1<nav class = "navbar navbar-expend-md navbar-light bg-light sticky-top">
ここのnavbar-expand-mdを変えればよいです。
自分が良く参考にするサイトのリンクを張っておきます。
https://hackerthemes.com/bootstrap-cheatsheet/
現状では768pxをポイントで切り替えているようですので、mdからsmに変えればよいと思われます。
HTML
1<nav class = "navbar navbar-expand-sm navbar-light bg-light sticky-top">
追記
ほかの方がおっしゃっているようにスペルミスのようです。
この回答より先にそちらを試してみてください。
投稿2020/03/08 13:23
編集2020/03/08 13:25総合スコア10429
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/08 13:54
2020/03/08 13:54