Issues on Navigation bar- toggle bar when clicked doesn't show the pages

Question

I have followed the instruction on the navbar,but when the toggle button is clicked it doesn't show the pages.What could be the issue?I am working on windows 10. Here below is the HTML code.

  <nav class="navbar navbar-dark navbar-expand-sm  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 mr-auto" 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>

Answer 1

You need remove the .navbar-toggler from the button since by default its using display:none;

Then you also need to remove .navbar-collapse from the #Navbar since its forcing the item to be visible with display: flex !important.

<nav class="navbar navbar-dark navbar-expand-sm  fixed-top ">
    <div class="container">
        <button type="button" data-toggle="collapse" data-target="#Navbar">
            <span class="navbar-toggler-icon"></span>
            Text
        </button>
        <a class="navbar-brand mr-auto" href="#">Ristorante con Fusion</a>
        <div class="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>

Double check if you added the jQuery library and Bootstrap Js. if not, you can refer to the links below.

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>