bootstrapでヘッダーを作成中です
ヘッダーの左端にトップページへのリンク、右端に三つのリンクを作成し
画面幅が小さくなると右端のリンクがハンバーガーメニューに折りたたまれるというものを作りました
html
1<nav class="navbar navbar-default navbar-fixed-top"> 2 <div class="container-fluid"> 3 <div class="navbar-header"> 4 <a href="#" id="logo">TOP</a> 5 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnavi"> 6 <span class="sr-only">メニュー</span> 7 <span class="icon-bar"></span> 8 <span class="icon-bar"></span> 9 <span class="icon-bar"></span> 10 </button> 11 </div> 12 <div id="gnavi" class="collapse navbar-collapse"> 13 <ul class="nav navbar-nav navbar-right"> 14 <a href="#" id="logo">検索</a> 15 <a href="#" id="logo">このサイトについて</a> 16 <a href="#" id="logo">ヘルプ</a> 17 </ul> 18 </div> 19 </div> 20</nav>
css
1.navbar-default { 2 background-color: #e0edf9; 3 #logo { 4 font-size: 20px; 5 font-weight: 400; 6 margin-top: 9px; 7 margin-left: 7px; 8 display: inline-block; 9 color: #0c3370; 10 text-decoration: none; 11 } 12 #gnavi a { 13 color: #0c3370; 14 text-decoration: none; 15 &:hover { 16 background-color: #8fb2e8; 17 } 18 } 19} 20 21.navbar-default .navbar-toggle, 22.navbar-default .navbar-toggle:focus, 23.navbar-default .navbar-toggle:hover { 24background-color: #ffffff; 25}
しかし、三つのリンクのリンクのうち一番上にある検索のリンクを
ハンバーガーメニューの中に入れない かつ
そのリンクをハンバーガーメニューの左横に置きたいと考えました
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/19 09:37