bootstrapにてハンバーガーメニューを作りたいと考えています。
しかし、クラスに規定したsmallサイズ以下になった際に、ハンバーガーが表示されません。原因を教えていただければ幸いです。
HTML
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="copyright" content="Copyright (C) dotinstall.com"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="3_2.css"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> </head> <body> <!-- navigation --> <div class="inner-section"> <nav class="navbar navbar-expand-sm py-0 px-0"> <!-- ナビロゴ --> <a class="logo navbar-brand" href="step3_2.html"> <img src="images/logo.png" alt=""> </a> <!-- メニューアイコン --> <button class="navbar-toggler" data-toggle="collapse" data-target="#menu"> <span class="navbar-toggler-icon"></span> </button> <!-- メニュー --> <div id="menu" class="collapse navbar-collapse justify-content-end"> <ul class="nav navbar-nav justify-content-end"> <li class="top_nav nav-item text-center"> <a class="nav-link" href="#">会社情報 <span class="navbar-text d-block py-0">COMPANY</span> </a> </li> <li class="top_nav nav-item text-center"> <a class="nav-link" href="#">運営サービス <span class="navbar-text d-block py-0">SERVICE</span> </a> </li> <li class="top_nav nav-item text-center"> <a class="nav-link" href="#">お知らせ <span class="navbar-text d-block py-0">NEWS</span> </a> </li> <li class="top_nav nav-item text-center"> <a class="nav-link" href="#">採用情報 <span class="navbar-text d-block py-0">RECRUIT</span> </a> </li> <li class="top_nav nav-item text-center"> <a class="nav-link" href="">お問合わせ <span class="navbar-text d-block py-0">CONTACT</span> </a> </li> </ul> </div> </nav> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body> </html>
css
/* navigation */ nav { padding: 0; } .logo img { width: 208px; } li.top_nav { padding-right: 14px; padding-left: 14px; } li.top_nav a { font-size: 15px; margin-top: 22px; height: 58px; } li.top_nav a:hover{ color: #168eea; } .nav-link { color: #000; } span { text-align: center; letter-spacing: 0.15em; font-size: 10px; color: #dcdcdc; } ```言語 HTML、CSS、Bootstrap ### 試したこと script要素の挿入不足を見直しました ### 補足情報(FW/ツールのバージョンなど) macOS High Sierra / Google chrome
回答1件
あなたの回答
tips
プレビュー