私はCSSのメディアクエリを使ってブーストラップのnavbarを持っていて、画面が一定のサイズより小さいときにハンバーガーボタンで開くことができます)。しかし、Navbarがフルスクリーンで展開されているときにうまく動作するNavbar内のドロップダウンメニューもありますが、Navbarのハンバーガーバージョンから開くと、ドロップダウンメニューのボタンは表示されません。崩壊したハンバーガーでnavbarが起動しないときにブートストラップnavbarのドロップダウンメニューボタンが表示されない
WIDE SCREEN - ナビゲーションバーDROP DOWNが正常に動作します:
NARROW SCREEN(ハンバーガー) - ドロップダウンメニューボタンはしないでくださいSHOW:以下
は、ナビゲーションバーのHTMLコードです:
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="900">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Son Of The Right Hand v.0.html#postWelcome">Son of the Right Hand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active" id="home"><a href="Son Of The Right Hand v.0.html#postWelcome">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">What is tSotRH?</a></li>
<li><a href="#">About Me</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Streams <span class="caret"></span></a>
<ul class="dropdown-menu pinkBackground">
<li><a style="color:#062F4F" href="#">Stream 1</a></li>
<li><a style="color:#062F4F" href="#">Stream 2</a></li>
<li><a style="color:#062F4F" href="#">Stream 3</a></li>
</ul>
</li>
</ul>
</div>
</nav>
これは、navbarを折りたたむCSSメディアクエリです。
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
これは私のナビゲーションバーのCSSコードは次のとおりです。
すべてのヘルプは、多くのメニューも(ハンバーガーボタンでcollapedから開いたときにナビゲーションバーのドロップダウンボタンが表示されない理由として高く評価され.navbar-default {
z-index: 1;
background-color: #062F4F;
border-color: #062F4F;
}
/* title */
.navbar-default .navbar-brand {
color: #FFFFFF;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #813772;
}
/* link */
.navbar-default .navbar-nav > li > a {
color: #FFFFFF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #813772;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #FFFFFF;
background-color: #813772;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #FFFFFF;
background-color: #062F4F;
}
/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #000000;
border-bottom-color: #000000;
}
、
! –