CODEWITHSUNDEEP
htmlcss
iktefish
iktefish

Reputation: 19

Navbar collapse toggle not working (Bootstrap5)

I'm new to Bootstrap. Watching this tutorial from FreeCodeCamp. Been following step by step, but at around 1hr 11min he checks the responsiveness of his site. Upon dropping the screen width his NavBar collapses (mine does too) but, unlike him, my NavBar doesn't toggle when collapsed.

Here's the code:

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Learning Bootstrap (v5) with SASS</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        <link rel="stylesheet" href="assets/css/style.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="assets/css/fontawesome.css" type="text/css" media="screen" />
        <!-- Place favicon.ico in the root directory -->

    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">
            You are using an <strong>outdated</strong> browser. Please
            <a href="http://browsehappy.com/">upgrade your browser</a> to improve
            your experience.
            </p>
        <![endif]-->
        <!-- Starting the NavBar section -->
        <nav class="navbar navbar-expand-lg navbar-dark menu container-fluid">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <img src="images/logo.svg" alt="logo image" style="width:15.5%; height:15.5%; padding-left:3%"/>
                </a>
                <!-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> -->
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                    <!-- <ul class="navbar-nav me-auto mb-2 mb-lg-0"> -->
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Services</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Testimonials</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">FAQ</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                        <!-- <li class="nav-item dropdown">
                             <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                             Testimonials
                             </a>
                             <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                             <li><a class="dropdown-item" href="#">Action</a></li>
                             <li><a class="dropdown-item" href="#">Another action</a></li>
                             <li><hr class="dropdown-divider"></li>
                             <li><a class="dropdown-item" href="#">Something else here</a></li>
                             </ul>
                             </li> -->
                        <!-- <li class="nav-item">
                             <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                             </li> -->
                    </ul>
                    <button class="rounded-pill btn-rounded" type="button">
                        +880 17654321
                        <span>
                            <i class="fas fa-phone-alt"></i>
                        </span>
                    </button>
                </div>
            </div>
        </nav>
        <!-- <script src="/assets/js/bootstrap.js" type="text/javascript"></script> -->
        <!-- <script src="/assets/js/bootstrap.bundle.js" type="text/javascript"></script> -->
        <script src="/assets/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    </body>
</html>

Upvotes: 0

Views: 126

Answers (1)

iktefish
iktefish

Reputation: 19

I figured out the issue, my script link was wrong:

 <script src="/assets/js/bootstrap.bundle.min.js" type="text/javascript"></script>

It should be:

 <script src="./assets/js/bootstrap.bundle.min.js" type="text/javascript"></script>

Upvotes: 1

Related Questions