Posted on

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>

Leave a Reply

Your email address will not be published. Required fields are marked *