在手机上查看站点“ navbar”时,该站点永久可见。
我尝试更改CSS中的某些值,但无济于事。显然我缺少了一些东西。
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="sticky-wrapper" id="tmNavbar" align="center">
<ul class="nav navbar-nav">
<li><a href="index.html"><img src="img/button-home-h.jpg"></a></li>
<li><a href="services.html"><img src="img/button-my-services.jpg"></a></li>
<li><a href="my-dogs.html"><img src="img/button-my-dogs.jpg"></a></li>
<li><a href="puppies-for-sale.html"><img src="img/button-puppies-for-sale.jpg"></a></li>
<li><a href="contact.html"><img src="img/button-contact-us.jpg"></a></li>
</ul>
</div>
</div>
</nav>
.navbar-inverse {
background-color: #383E4C;
border-color: #383E4C;
}
.navbar-nav>li {
display: inline-block;
padding: 10px;
}
.navbar-inverse .navbar-nav>li>a {
background: #383E4C none repeat scroll 0 0;
border: 1px solid #646d7c;
color: #fff ;
font-size: 20px;
padding: 5px 5px;
text-decoration: none;
text-transform: capitalize;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.navbar-inverse .navbar-nav > li > a.current,
.navbar-inverse .navbar-nav > li > a:hover {
background: #76d401;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
菜单栏尴尬地显示在标题图像上方,并且在向下滚动页面时不会移动。