0
我一直在尋找一個解決方案整天,並嘗試了很多不同的東西,但到目前爲止,沒有運氣。當縮小窗口時會出現導航欄切換(漢堡菜單),但點擊按鈕(漢堡包菜單)時菜單不會出現。特別令人不安的是:第一次加載頁面時菜單背景是打開的。Bootstrap下拉菜單沒有出現/正在工作
請注意,我不會在頭文件中調用bootstrap.css,因爲我想直接在我的style.css文件中自定義我的組件。使用Bootstrap,我有義務調用bootstrap.css並直接在其中進行自定義以使其工作,或者我可以從bootstrap.css中選擇所選元素並將其複製到style.css中以使其工作?
這就是HTML
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo">
<a class="navbar-brand page-scroll" href="#page-top"></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse" >
<ul class="nav navbar-nav" >
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href=".contact">CONTACT</a>
</li>
<li>
<a class="page-scroll" href=".recommendations">ABOUT</a>
</li>
<li>
<a class="page-scroll" href=".work">WORK</a>
</li>
</ul>
</div>
</div>
</nav>
所有的腳本在體內末
<!-- JQUERY -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
而CSS下面
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{
display: block;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
background-color: #08293C;
}
.navbar-fixed-top{
top: 0;
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
.container {
margin-right: auto;
margin-left: auto;
width: 500px;
}
button{
display: none;
}
.logo {
float: left;
width: 209px;
padding-top: 2px;
height: 29px;
background: url(../images/logo.svg);
background-repeat: no-repeat;
margin-top: 6px;
}
.logo a{
width: 209px;
height: 29px;
}
.nav {
margin: 0px auto;
width: 500px;
cursor:pointer;
font-weight: 100;
font-size: 9pt;
letter-spacing: 4px;
}
nav ul {
padding:0px;
margin:0px;
cursor:pointer;
}
nav li {
display:inline;
margin-top: 23px;
margin-left:20px;
color: #FFFFFF;
float:right;
}
nav a {
color: #FFFFFF;
text-decoration: none;
display: block;
}
nav a:hover {
color: #B4C6D1;
}
ul.nav li.iconhb {display: none;}
.hidden{
display: none!important;
}
@media only screen and (max-width: 767px) {
.navbar-toggle {
display: none;
}
}
@media only screen and (max-width: 575px) {
.container{
margin-left: 5%;
margin-right: 5%;
width: auto;
}
.navbar-toggle{
position: relative;
float: right;
margin-top: 12px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
}
.navbar-toggle:focus {
outline: 0;
}
.navbar-toggle .icon-bar{
display: block;
width: 18px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar{
margin-top: 4px;
}
.navbar-toggle{
display: block;
}
button{
cursor: pointer;
}
.navbar-toggle .icon-bar{
display: block;
width: 18px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar{
margin-top: 4px;
}
.icon-bar{
background-color: white;
}
.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
height: 200px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.navbar-collapse.in {
overflow-y: visible;
}
ul.nav.responsive li a {
display: block;
text-align: left;
}
ul.nav.responsive li {
float: none;
display: inline;
}
/* hide menu display iconhb */
ul.nav li:not(:first-child) {display: none;}
ul.nav li.iconhb {
float: right;
display: inline-block;
}
/* responsive nav */
ul.nav.responsive {position: relative;}
ul.nav.responsive li.iconhb {
position: absolute;
right: 0;
top: 0;
}
ul.nav.responsive li {
float: none;
display: inline;
}
ul.nav.responsive li a {
display: block;
text-align: left;
}
}