我在我的网站上使用Bootstrap的navbar-top-fixed
,但它似乎不起作用。当我向下滚动时,它没有固定在顶部。
这是我的HTML代码:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="gdgt-menu">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="gdgt-logo">
<a class="navbar-brand" href="<?php echo get_site_url(); ?>" rel="bookmark">brand</a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="nav-items collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--my menu is here-->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
以下是CSS代码:
.gdgt-menu{
padding-right: 10%;
padding-left: 10%;
}
@media only screen and (min-width : 200px) and (max-width : 768px) {
.navbar{
margin-bottom: 0px !important;
}
.navbar-collapse {
width: 100%;
}
.menu-header-container{
width: 100%;
}
.gdgt-menu{
padding-right: 0% !important;
padding-left: 0% !important;
}
#bs-example-navbar-collapse-1 .current-menu-item a {
padding-right: 100% !important;
}
}
@media only screen and (min-width : 200px) and (max-width : 768px) {
.featured-content{
width: 100%;
margin-right: 0px !important;
margin-left: 0px !important;
}
}
@media only screen and (min-width : 768px) and (max-width : 1010px) {
.gdgt-menu{
padding-right: 0% !important;
padding-left: 0% !important;
}
.nav-items{
width: 85% !important;
}
}
.nav-items{
width: 70%;
float: right;
}
.navbar{
height: 60px;
display: block;
position: relative;
}
.menu{
margin: 0px !important;
padding-left: 0px !important;
}
.menu-header-container{
float: right;
}
@media only screen and (min-width : 200px) and (max-width : 768px) {
.menu-header-container{
background-color: #2c3e50;
}
.menu li{
width: 100% !important;
}
}
.menu li{
list-style-type: none;
line-height: 60px;
width: auto;
float: left;
transition: all 0.2s ease-in-out;
}
.menu li:hover{
background-color: #34495e;
}
.menu a{
color: #fff;
text-decoration: none;
padding-left: 20px;
padding-right: 20px;
}
有什么想法可以解决这个问题吗?我不太确定为什么会出现这种情况。然而,我觉得是
@media
导致了这个问题。请帮忙 :)
.navbar { position: relative; }
。 - Turnip