How to create a navbar in a responsive webpage? Following is an example from the full-stack course I took on Coursera. It depends mostly on Bootstrap 4.



Inside the body tag,
<nav class="navbar navbar-dark navbar-expand-sm bg-primary fixed-top"> <div class="container"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Ristorante Con Fusion</a> <div class="collapse navbar-collapse" id="Navbar"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"><a class="nav-link" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li> <li class="nav-item"><a class="nav-link" href="#">Menu</a></li> <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> </ul> </div> </div> </nav>