私はブーストラップのnavbarトグルに問題があり、しばらくの間これで苦労しています。まず、thisのように、ウィンドウサイズを小さくすると、私のロゴが下に隠れてしまいます。コンテナが高すぎるようですが、それを減らすと他のコンテンツが影響を受けます。次に、ウィンドウのサイズを小さくすると、ナビゲーションリンクでも同様のことが起こります。thisのような回転式写真を押すロゴの下に表示されます。この時点で、私は、リンクを隠してトグルボタンを表示する必要があります。 最後に、モバイルビューのナビゲーションは、最初のスクリーンショットに示されているように、透明な背景と不要な上部のパディングを表示するだけです。ブートストラップnavbarのトグルが正しく動作しません。モバイルビューでロゴが下に隠れています
関連HTML:
<div class="navbar navbar-default" data-spy = "affix" data-offset-top = "200" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="index-en"><img class = "logo" src = "logo.png" alt = ""></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a class = "active" href="#">Home</a></li>
<li><a href="about">About us</a></li>
<li><a href="employees">Employees</a></li>
<li><a href="where">Where we are</a></li>
</ul>
</div>
</div>
</div>
CSS:
.container{
min-height: 100%!important;
margin: 0 auto!important;
padding: 0 0 0px!important;
}
.navbar-default .navbar-nav > li > a {
color: #4E4F51!important;
text-transform: uppercase!important;
font-family: 'Raleway', sans-serif!important;
font-size: 16px;
text-decoration: none;
margin: 0px 10px;
padding: 10px 10px;
position: relative;
z-index: 0;
cursor: pointer;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #3BB34A!important;
background-color: transparent!important;
}
.navbar-header {
overflow:hidden!important;
}
.logo{
max-height:100%;
}
.navbar-brand {
padding: 0px!important;
height: 140px!important;
}
.navbar-brand>img {
padding: 15px!important;
width: auto!important;
}
.navbar-toggle {
padding: px!important;
margin: 25px 15px 25px 0!important;
}
.navbar {
margin-bottom: 0!important;
}
.navbar-default {
z-index:9999!important;
}
.navbar-default .navbar-nav {
padding-top:50px;
}
.affix{
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
opacity: 0.9;
max-height:140px;
}
.affix-top {
-webkit-transition:padding 1.5s ease-in-out;
-moz-transition:padding 1.5s ease-in-out;
-o-transition:padding 1.5s ease-in-out;
transition:padding 1.5s ease-in-out;
max-height:140px;
}
が、私はこの問題を解決する方法についていくつかの提案をいただければ幸いです。 高さが固定された新しいdivが追加されましたが、機能しませんでした。ロゴはその場所にとどまっていましたが、切り替えボタンは表示されません。