jQuery Bootstrap 导航栏固定顶部不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26547194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap navbar-fixed-top not working
提问by DON TOLIVER
I am using Bootstrap's navbar-top-fixedon my site but it doesn't seem to work. When I scroll down, it isn't fixed at the top.
我navbar-top-fixed在我的网站上使用 Bootstrap ，但它似乎不起作用。当我向下滚动时，它没有固定在顶部。
Here is my HTML code:
这是我的 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>
And here is the CSS:
这是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;
}
Any idea of what is causing this problem? I am not really sure why this is happening. However, I feel like the @mediais causing this.
知道是什么导致了这个问题吗？我不确定为什么会发生这种情况。但是，我觉得@media是造成这种情况的原因。
Please help :)
请帮忙 ：）
回答by Turnip
You are overriding bootstraps default positioning of the .fixed-top-navbar.
您正在覆盖.fixed-top-navbar.
From bootsrap.css
来自 bootsrap.css
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed; /* <-- Look here */
right: 0;
left: 0;
z-index: 1030;
}
From your code:
从您的代码：
.navbar{
height: 60px;
display: block;
position: relative; /* <-- Oh dear */
}
回答by Praveen Kumar Purushothaman
Change your code:
更改您的代码：
.navbar {
height: 60px;
display: block;
position: fixed;
}
