私のサイトは gitlit.org です。モバイルに移行したり、ブラウザーをスケーリングしたりすると、navbar は問題なくモバイル デザインに切り替わり、3 本の白い線 (メニュー) ボタンをクリックすると機能しますが、[ホーム] をクリックしても何も起こりません。バー全体をクリックできるようにする方法はありますか?
私のnavbarコード:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Home</a>
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="about.html">About us</a></li>
<li><a href="#about">resources</a></li>
<li><a href="sermons.php">sermons</a></li>
<li><a href="#contact">contact us</a></li>
<li><a href="#contact">ministries</a></li>
<li><a href="#contact">blog</a></li>
</ul>
</div>
</div>
これは、NavBar に適用されるカスタム CSS です。メインのブートストラップ CSS は編集していません。
.navbar {
background-color: #000;
float: none;
}
.navbar-toggle {
border: 0px solid #000;
border-radius: 6px;
}
.navbar-nav > li > a {
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
}
.navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
background-color: #000;
color: white;
}
.navbar-nav > .active > a:hover {
color: #fdbb20;
}
.navbar-nav > li > a:hover, .navbar-nav > li > a:focus {
color: #fdbb20;
}
.navbar-brand {
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
}
.navbar-brand:hover, .navbar-brand:focus {
color: #fdbb20;
}