[英]Navbar doesn't collapse to hamburger menu
I'm trying to make my Navbar responsible and when page is getting smaller navbar transforms to burger menu.我试图让我的导航栏负责,当页面变小时,导航栏会转换为汉堡菜单。 It was working on a first try's but now it's not transforming to hamburger menu.
它正在第一次尝试,但现在它没有转变为汉堡菜单。 My buttons and switch just disappears from navbar when screen goes smaller.
当屏幕变小时,我的按钮和开关会从导航栏中消失。
<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 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;
}
Change HTML
markup like this.像这样更改
HTML
标记。 You have two ul
closing tag </ul>
it's incorrect.你有两个
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 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;
}
You have to add custom CSS
for navbar-toggler
and switch
.您必须为
navbar-toggler
和switch
添加自定义CSS
。 My HTML
markup format is correct.我的
HTML
标记格式是正确的。
Here is the CodePen .这是CodePen 。
Desktop view:桌面视图:
Mobile view:移动视图:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.