我在我的网站上使用了 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
是造成这种情况的原因。
请帮忙:)
最佳答案
您正在覆盖 .fixed-top-navbar
的 Bootstrap 默认定位。
来自 bootsrap.css
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed; /* <-- Look here */
right: 0;
left: 0;
z-index: 1030;
}
来自您的代码:
.navbar{
height: 60px;
display: block;
position: relative; /* <-- Oh dear */
}
关于jquery - Bootstrap navbar-fixed-top 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26547194/