ハンバーガーメニューがうまく開きません。
トップページはきちんと開き閉じするのですが、他サイトはハンバーガーメニューをクリックしても開きません。
トップページ、他サイトは読み込みコードを記述しているレイアウトファイルを継承しています。
読み込みコードは以下の通りです。
<head> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery-3.3.1.slim.min.js"></script> </head> ※ダウンロードしたcssファイル、jsファイルはpublicフォルダに入れています。また、
<script src="js/bootstrap.bundle.min.js"></script>この読み込みコードを追記すると、他サイトではきちんと開き閉じできたのですが、トップページがクリック後開きっぱなしで戻らなくなりました。
追記:ビュー部分のコードです。
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top"> <div class="container"> <div class="navbar-brand"> <!--検索フォーム--> <form action="{{ route('posts.search') }}" method="get"> <div class="input-group mb-1"> <input type="text" class="form-control input-lg" placeholder="検索キーワード" name="search" value=""> <div class="input-group-append"> <button class="btn btn-secondary" type="submit">検索</button> </div> </div> </form> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-start" id="navbarNav" > @if (Auth::check()) <!--ユーザーアイコン--> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="/"><img class="icon" src="{{ asset('/img/main4.jpg') }}" alt="アイコン" style="margin:0 10px 0 0;" >{{ Auth::user()->name }}</a> </li> <!--区切り線--> <div class="sen"></div> </ul> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="/login">ホーム<span class="sr-only">(current)</span></a> </li> </ul> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="{{ route('posts.create') }}">作品投稿</a> </li> </ul> <ul class="navbar-nav"> <li class="nav-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> <a class="nav-link" href="/register">ログアウト</a> </li> </ul> <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> @csrf </form> @else <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="/login">ログイン<span class="sr-only">(current)</span></a> </li> </ul> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="/register">会員登録</a> </li> </ul> @endif </div> </nav>
原因がわかりません...
回答よろしくお願いします。
app.cssとbootstrap.min.cssって競合してませんかね。
いずれにしてもhead記述だけでハンバーガーメニューができるわけではないのでビュー部分の記述も追加してください。
回答1件
あなたの回答
tips
プレビュー