twitter-bootstrap 带有引导程序的固定导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29706391/
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
Fixed navbar with bootstrap
提问by U23r
I'm trying to change the navbar in my child theme but I'm a newbie. I read some questions here about that and even saw the bootstrap site, but I don't understand how to solve my problem. I'm sorry for my ignorance but could someone explain to me how it works?
我正在尝试更改我的子主题中的导航栏，但我是新手。我在这里阅读了一些关于此的问题，甚至还看到了引导站点，但我不明白如何解决我的问题。我很抱歉我的无知，但有人可以向我解释它是如何工作的吗？
I'm using this theme http://demos.codexcoder.com/#limo_wpand I would like to fixed the navbar instead of this "blink" and float. Just stay fixed after scroll the page.
我正在使用这个主题http://demos.codexcoder.com/#limo_wp我想修复导航栏而不是这个“闪烁”和浮动。滚动页面后保持固定。
采纳答案by Chris Mackie
You can find an example on the bootstrap website.
您可以在 bootstrap 网站上找到示例。
http://getbootstrap.com/examples/navbar-fixed-top/
http://getbootstrap.com/examples/navbar-fixed-top/
Or you can change
或者你可以改变
<section id="headnev" class="navbar topnavbar">
to
到
<section id="headnev" class="navbar navbar-fixed-top">
in your header file and remove:
在您的头文件中并删除：
// Script for top Navigation Menu
jQuery(window).bind('scroll', function () {
if (jQuery(window).scrollTop() > 100) {
jQuery('#headnev').addClass('navbar-fixed-top').removeClass('topnavbar');
jQuery('body').addClass('bodytopmargin').removeClass('bodynomargin');
} else {
jQuery('#headnev').removeClass('navbar-fixed-top').addClass('topnavbar');
jQuery('body').removeClass('bodytopmargin').addClass('bodynomargin');
}
});
from custom.js
来自 custom.js
回答by Chris Mackie
The following command:
以下命令：
Fixed to top:Add .navbar-fixed-topand include a .containeror .container-fluidto center and pad navbar content.
固定到顶部：添加.navbar-fixed-top并包含一个.container或.container-fluid到中心和填充导航栏内容。
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
If you want to fixed menu after scroll the page. You use fllowing javascript code. In this code fixed menu after if scrolls over a specific element. I wrote the following code based on your template.
如果您想在滚动页面后固定菜单。您使用流动的 javascript 代码。在此代码中，如果滚动到特定元素后的固定菜单。我根据您的模板编写了以下代码。
<script>
if ( $('body').scrollTop() > $('.section-a').position.top ) {
$('#headnev').removeClass('topnavbar');
$('#headnev').addClass('navbar-fixed-top');
}
</script>
回答by Alex_Spas
just add a class="nav navbar navbar-fixed-top"
只需添加一个 class="nav navbar navbar-fixed-top"
I'll give you an example of my code, just use it and see how it works.
我会给你一个我的代码的例子，使用它看看它是如何工作的。
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container" id="container">
<div class="navbar-header">
<div class="navbar-brand"><a href="nature.html">Project Nature</a></div>
<button class="navbar-toggle" data-toggle="collapse" data-target="navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Nature <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><a href="#">Plants</a></a></li>
<li><a href="#"><a href="#">Landscapes</a></a></li>
<li><a href="#"><a href="#">Animals</a></a></li>
<li><a href="#"><a href="#">Elements</a></a></li>
</ul>
</li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Blah</a></li>
<li><a href="#contact" data-toggle="modal">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><a href="#">Twitter</a></a></li>
<li><a href="#"><a href="#">Facebook</a></a></li>
<li><a href="#"><a href="#">Google+</a></a></li>
<li><a href="#"><a href="#">LinkedIn</a></a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
This will generate a navbar with a heading (title) 5 menu items of wich 2 are dropdowns.
这将生成一个带有标题（标题）的导航栏 5 个菜单项，其中 2 个是下拉菜单。
Greetings :)
问候 ：）
回答by tribe84
In the navbardiv, you should add the class name .navbar-fixed-top.
在 中navbardiv，您应该添加类名.navbar-fixed-top。
回答by Opaw Nako
You would need to add something like the following CSS to a child theme to override this behavior in the parent theme.
您需要将类似于以下 CSS 的内容添加到子主题以覆盖父主题中的此行为。
#header .navbar {
animation:none !important;
}
If you aren't familiar with WordPress child themes, hereis a good resource for you. There may even be a theme setting for this. Depends on what the theme developer made available in the theme's options.
如果您不熟悉 WordPress 子主题，这里有一个很好的资源。甚至可能有一个主题设置。取决于主题开发人员在主题选项中提供的内容。
回答by sudipt dabral
You could try my css also, simple yet effective if you are positioning it always on the top
你也可以试试我的 css，如果你总是把它放在最上面，简单而有效
.navbar{
position:fixed;
width:100%;
z-index: 1000000;
top:0;
}
