html - 我的自定义引导导航栏不会保持固定

标签 html css navbar

我创建了一个引导导航栏,然后更改了颜色、背景颜色和悬停颜色。问题是自从我进行了这些更改后,导航栏就不会保持不变。我是 CSS 的新手,我到处搜索解决方案,遗憾的是我到处都说要将 navbar-static 换成 navbar-fixed,但我的代码中已经有了 navbar-fixed。请帮忙!

这是相关的 CSS 和 HTML:

.navbar-custom {
	z-index:999999;  /* here I fixed an issue where the collapsed navbar showed up underneath the slider under it*/
	position: absolute; 
	background-color: #E46142;
} 

.section1 .navbar-custom .container #navbar-collapse .nav.navbar-nav li a{
	color: white; /* Here I had to target the text very specifically otherwise the color would not change */
}

.section1 .navbar-custom .container .navbar-header .navbar-brand{
		color: white;
}

.section1 .navbar.navbar-custom.navbar-fixed-top .container .navbar-header .navbar-toggle .icon-bar{
	background-color: white;
}

ul.nav a:hover { color: #000 !important; }
<div class="section1">
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
	<div class="container">
    	<div class="navbar-header">
        	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            	<span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Name</a>
        </div><!-- End Nav Bar Header -->
        <div class="collapse navbar-collapse" id="navbar-collapse">
        	<ul class="nav navbar-nav">
            	<li><a href="#">Text1</a></li>
                <li><a href="#">Text2</a></li>
                <li><a href="#">Text3</a></li>
                <li><a href="#">Text4</a></li>
                <li><a href="#">Text5</a></li>
            </ul>
        </div>
    </div><!-- End Container -->
</nav>
<!-- End Nav Bar -->
</div>

最佳答案

更改位置或删除此位置

.navbar-custom {
    z-index:999999;  /* here I fixed an issue where the collapsed navbar showed up underneath the slider under it*/
    position: fixed; 
    background-color: #E46142;
}

关于html - 我的自定义引导导航栏不会保持固定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35081275/

相关文章:

html - 转换:translateY 在 Safari 中不起作用

html - 悬停 CSS 中的类

html - 我的导航栏不会自行居中

css - 如何让 twitter-bootstrap 导航栏子项在小屏幕上折叠/展开?

html - 导航栏没有 UL 标签 - 无法在页面上居中链接

javascript - 附加表的位置不完全显示它在哪里

jquery - 对无效事件监听器的 html5 验证未触发

javascript - 无需重定向的 HTML 页面提交

javascript - Spotify 应用程序 - 维护页面之间的状态

html - 视频导致 Firefox 滞后?