collapsed navbar for bootstrap 4
Question
can I make a collapsed navbar in my code, because if I open in mobile the navbar cannot be collapsed to make one? I've tried to make a button and make it false but the navbar does not show on desktop or on mobile. this the code that I make to show a navbar.
<nav class="navbar-default navbar-side navbar-collapse" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<a class="active-menu ukuran" href="?hal=dashboard"><i class="fas fa-tachometer-alt "></i> Dashboard</a>
</li>
<li class="nav-item dropdown">
<a class="nav-item dropdown-toggle ukuran" id="navbardrop" data-toggle="dropdown"><i class="fas fa-chart-line"></i> Quality</a>
<div class="dropdown-menu">
<a href="?hal=quality1" class="dropdown-item ukuran2">Quality 1</a>
<a href="?hal=pemborong" class="dropdown-item ukuran2">Pemborong</a>
<a href="?hal=quality2" class="dropdown-item ukuran2">Quality 2</a>
</div>
</li>
<li>
<a class="active-menu ukuran" href="logout.php"><i class="fas fa-sign-out-alt"></i> Keluar</a>
</li>
</ul>
</div>
</nav>
the CSS code like this
.navbar-side {
border: none;
background-color: #d5f0f3;
height: 100%;
}
.sidebar-collapse .nav > li > a {
color:#000;
background-color: #d5f0f3;;
text-shadow:none;
}
.navbar-cls-top .navbar-brand{
color: #00c900;
background: #d5f0f3;
text-align: center;
height: 50px;
font-size: 40px;
}
.dropdown a {
padding-left: 8px;
}
@media(min-width:768px) {
.navbar-side {
z-index: 1;
position: absolute;
width: 260px;
}
.navbar {
border-radius: 0px;
}
}
2 answers
solution1
0 2019-12-20 03:29:14
A few things:
- No expand class on the
<nav> - No
id="collapsibleNavbar"on thecollapsediv - relevant class missing on div with
id="main-menu"
Working snippet below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav" id="main-menu"> <li> <a class="active-menu ukuran" href="?hal=dashboard"><i class="fas fa-tachometer-alt "></i> Dashboard</a> </li> <li class="nav-item dropdown"> <a class="nav-item dropdown-toggle ukuran" id="navbardrop" data-toggle="dropdown"><i class="fas fa-chart-line"></i> Quality</a> <div class="dropdown-menu"> <a href="?hal=quality1" class="dropdown-item ukuran2">Quality 1</a> <a href="?hal=pemborong" class="dropdown-item ukuran2">Pemborong</a> <a href="?hal=quality2" class="dropdown-item ukuran2">Quality 2</a> </div> </li> <li> <a class="active-menu ukuran" href="logout.php"><i class="fas fa-sign-out-alt"></i> Keluar</a> </li> </ul> </div> </nav>
solution2
0 2019-12-20 06:11:05
bootstrap 4 navbar:
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"> </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark"> <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target=".dual-collapse" aria-expanded="false"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse dual-collapse collapse"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active-menu ukuran" href="?hal=dashboard"><i class="fas fa-tachometer-alt "></i> Dashboard</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle ukuran" id="navbardrop" data-toggle="dropdown"><i class="fas fa-chart-line"></i> Quality</a> <div class="dropdown-menu"> <a href="?hal=quality1" class="dropdown-item ukuran2">Quality 1</a> <a href="?hal=pemborong" class="dropdown-item ukuran2">Pemborong</a> <a href="?hal=quality2" class="dropdown-item ukuran2">Quality 2</a> </div> </li> <li class="nav-item"> <a class="nav-link active-menu ukuran" href="logout.php"><i class="fas fa-sign-out-alt"></i> Keluar</a> </li> </ul> </div> </nav> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </html>
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.
Related Question
Show row collapsed in Bootstrap
How to collapsed only first bootstrap panel?
Account info on Bootstrap Navbar
Dynamic navbar in bootstrap
bootstrap dropdown navbar not working
bootstrap accordion have all collapsed by default
Overlapping divs with bootstrap navbar
bootstrap navbar not works on wordpress
Bootstrap navbar vertical not horizontal
Bootstrap navbar not functioning with php
Related Tags