"Nav Bar"
Bootstrap 4.1.1 Snippet by roniyronron

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Navbar Responsive</title> <link rel="stylesheet" href="styles.css"> </head> <body> <nav class="navbar"> <div class="navbar-logo">Logo</div> <div class="navbar-menu" id="navbarMenu"> <a href="#resume">Resume</a> <a href="#business">Business</a> <a href="#book">Book</a> <a href="#app">Aplikasi</a> </div> <div class="navbar-burger" id="navbarBurger"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div> </nav> <script src="script.js"></script> </body> </html>
body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .navbar { display: flex; align-items: center; justify-content: space-between; background-color: #333; color: #fff; padding: 10px 20px; } .navbar-logo { font-size: 24px; font-weight: bold; } .navbar-menu { display: flex; } .navbar-menu a { color: #fff; text-decoration: none; padding: 10px; } .navbar-burger { display: none; cursor: pointer; } .bar { width: 25px; height: 3px; background-color: #fff; margin: 5px; } /* Media query for responsive design */ @media screen and (max-width: 768px) { .navbar-menu { display: none; } .navbar-burger { display: flex; } .navbar-burger.active .bar { background-color: #333; } }
const navbarMenu = document.getElementById('navbarMenu'); const navbarBurger = document.getElementById('navbarBurger'); navbarBurger.addEventListener('click', () => { navbarMenu.classList.toggle('active'); navbarBurger.classList.toggle('active'); });

Related: See More

Light Bootstrap Dashboard React

Questions / Comments: