0
私はドロップダウンメニューを持つnavbarを持っています。今私はそれをスマートフォンユーザーにも使えるようにしたい。私はすでにブートストラップクラスを持っているので、私はブートストラップを使うことができると思った。レスポンスブートストラップnavbar - スマートフォン用のメニューボタンが表示されない
私は基本的なnavbarを作成するために、それが動作しているかどうかをテストするためにgeneratoを使用しました。
あなたはフィドルでウィンドウのサイズを変更https://jsfiddle.net/bwbuqco2/が、小さい画面のメニューボタンが表示されます。
は、ここでの結果です。しかし私のサイトではそうではありません。 navbarは私のサイトでは完全に消えてしまい、理由はわかりません。
古いナビゲーションバーのスタイルを無効にしましたが、問題が解決しませんでした。
さらに詳しい情報が必要な場合は、お知らせください。私は問題がどこにあるのか分からない。
私はブートストラップの横にあるソリューションでも開かれます。
.navbar{
margin-left: -3px;
margin-bottom: 0;
background: @color-purple;
border: none;
.navbar-nav{
> li {
> ul {
text-align: center;
padding: 0;
display: none;
z-index: 1;
background: rgba(41, 38, 87, 0.7);
position: absolute;
visibility: hidden;
list-style-type: none;
margin-left: -50px;
>li{
margin: 0 auto;
display: block;
> a {
border: 1px solid @color-purple;
display: block;
padding: 1em;
color: @color-white;
font-size: 14px;
font-weight: lighter;
text-transform: uppercase;
list-style-type: none;
}
>a:hover{
background: @color-purple;
text-decoration: none;
color: @color-white;
}
}
}
> a {
color: @color-white;
text-align: center;
font-size: 16px;
font-weight: lighter;
text-transform: uppercase;
padding: 25px 40px 25px 0px;
list-style-type: none;
}
>a:hover{
color: @color-white;
text-decoration: underline;
}
}
>li:hover{
> ul {
display: block;
position: absolute;
visibility: visible;
}
}
}
}
をお読みいただきありがとうございました
<nav class="navbar navbar-default">
<div class="container" style="margin-left:100px;">
<ul class="nav navbar-nav">
<li>
<a href="">
Startseite
</a>
</li>
<li>
<a href="ueber-mich/">
Über mich
</a>
</li>
<li>
<a href="#anker">
Referenzen
</a>
<ul>
<li><a href="link1/">link1/</a></li>
<li><a href="link2/">link2</a></li>
<li><a href="link3/">link3</a></li>
<li><a href="link4/">link4</a></li>
<li><a href="link4/">link4</a></li>
<li><a href="link5/">link5</a></li>
</ul>
</li>
<li>
<a href="link6/">
link6
</a>
</li>
</ul>
</div>
</div>
</nav>-->
CSS：
は、ここに私のナビゲーションバー構造です！