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
.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. You have two ul
closing tag </ul>
it's incorrect.
<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;
}
You have to add custom CSS
for navbar-toggler
and switch
. My HTML
markup format is correct.
Here is the CodePen .
Desktop view:
Mobile view:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.