[英]Navbar doesn't collapse to hamburger menu
我試圖讓我的導航欄負責,當頁面變小時,導航欄會轉換為漢堡菜單。 它正在第一次嘗試,但現在它沒有轉變為漢堡菜單。 當屏幕變小時,我的按鈕和開關會從導航欄中消失。
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand"><i class="far fa-chart-bar"></i></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="news/news.html">News</a>
</li>
</ul>
</ul>
</div>
<!-- Here is a switch for Light/Dark mode -->
<div class="theme-switch-wrapper" id="switch">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
<em></em>
</div>
</nav>
CSS
.navbar.navbar-expand-lg {
background-color:#6b7fdf;
height: 55px;
width: 100%;
}
.nav-link.dropdown-toggle {
color: black;
font-weight: bold;
margin-right: 0 auto;
}
.navbar-brand {
margin-top: 10px;
}
像這樣更改HTML
標記。 你有兩個ul
結束標簽</ul>
這是不正確的。
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<a class="navbar-brand"><i class="far fa-chart-bar"></i></a>
<!-- Here is a switch for Light/Dark mode | For Mobile -->
<div class="theme-switch-wrapper d-lg-none" id="switch">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1"></label>
</div>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="news/news.html">News</a>
</li>
</ul>
</div>
<!-- Here is a switch for Light/Dark mode | for Desktop -->
<div class="theme-switch-wrapper d-none d-lg-block" id="switch">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1"></label>
</div>
</div>
</nav>
CSS
.navbar.navbar-expand-lg {
background-color:#6b7fdf;
height: auto;
width: 100%;
}
.nav-link{
color: white;
}
.nav-link.dropdown-toggle {
color: black;
font-weight: bold;
margin-right: 0 auto;
}
.navbar-toggler{
border: 1px solid white;
color: white;
}
您必須為navbar-toggler
和switch
添加自定義CSS
。 我的HTML
標記格式是正確的。
這是CodePen 。
桌面視圖:
移動視圖:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.