网站导航栏在移动设备上始终可见

时间:2019-07-04 14:34:38

标签: xcode

在手机上查看站点“ 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;
}

菜单栏尴尬地显示在标题图像上方,并且在向下滚动页面时不会移动。

0 个答案:

没有答案