[英]Collapsed Bootstrap Navbar Not Showing
因此,當折疊時,我的導航欄菜單按鈕可以使用,但是在快速加載動畫之后,該菜單消失了。 不知道為什么會這樣,我搜索了其他問題和引導文檔,無法弄清楚。 該網站是http://philipeckert.com
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#brand">Eckert</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#gohereforabout">About</a></li>
<li><a href="#Portfolio">Portfolio</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar-default {
background-color: rgb(0, 32, 128);
border-color: #000000;
}
.navbar-default .navbar-brand {
color: white;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
.nav.navbar-nav.navbar-right li a {
color: white;
font-family: 'Ubuntu', sans-serif;
}
@media (max-width: 990px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
只需從您的@media查詢中刪除.navbar-collapse.collapse
CSS:
/*Remove this */
.navbar-collapse.collapse {
display: none!important;
}
這是小提琴演示: https : //jsfiddle.net/2pua65co/
刪除此CSS您的style.css第30行
.navbar-collapse.collapse {
display: none !important;
}
您需要添加以下CSS規則以將其折疊到function屬性:
.navbar.navbar-default .collapse.in {
display: block !important;
}
有關更多信息,請參見折疊用法 。
工作示例:
.navbar.navbar-default { background-color: rgb(0, 32, 128); border-color: #000000; } .navbar.navbar-default .navbar-brand { color: white; } .navbar.navbar-default .navbar-toggle .icon-bar { background-color: white; } .navbar.navbar-default .navbar-nav.navbar-right li a { color: white; font-family: 'Ubuntu', sans-serif; } @media (max-width: 990px) { .navbar.navbar-default .navbar-header { float: none; } .navbar.navbar-default .navbar-left, .navbar.navbar-default .navbar-right { float: none !important; } .navbar.navbar-default .navbar-toggle { display: block; } .navbar.navbar-default .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .navbar.navbar-default.navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar.navbar-default .navbar-collapse { overflow: hidden; } .navbar.navbar-default .navbar-collapse.collapse { display: none!important; } .navbar.navbar-default .navbar-nav { float: none!important; margin-top: 7.5px; } .navbar.navbar-default .navbar-nav > li { float: none; } .navbar.navbar-default .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; } .navbar.navbar-default .collapse.in { display: block !important; } .navbar.navbar-default .navbar-nav .dropdown-menu > li > a, .navbar.navbar-default .navbar-nav .dropdown-menu > li > a:hover, .navbar.navbar-default .navbar-nav .dropdown-menu > li > a:focus { color: #777; } }
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <nav class="navbar navbar-default navbar-fixed-top navbar"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#brand">Eckert</a> </div> <div class="collapse navbar-collapse" id="navbar"> <ul class="nav navbar-nav navbar-right"> <li><a href="#gohereforabout">About</a> </li> <li><a href="#Portfolio">Portfolio</a> </li> <li><a href="#Contact">Contact</a> </li> </ul> </div> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.