Bootstrap nav bar collapses but is not clickable on mobile-CodePudding

My navbar is able to collapse on moblile but nothing happens when I click the collapsed button. The nav bar works perfectly on desktop. But when I get on mobile I see the collapsed three lines but nothing happens when I click them. Anyone know how to get out of this one?

<nav >
    <div >
        <a  href="#">SQUR</a>
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
        </button>
        <div  id="navbarSupportedContent">
            <ul >
                <li >
                    <a  aria-current="page" href="/">Home</a>
                </li>
                <li >
                    <a  href="/campgrounds">Spaces</a>
                </li>
                <li >
                    <a  href="/campgrounds/new">New Space</a>
                </li>
            </ul>
            <form action="/campgrounds/find"  href="/campgrounds/find" method="GET">
                <input  type="text" placeholder="Search a city" aria-label="Search"
                    name="city" id="city">

                <div >
                    <input  type="checkbox" id="agent" value="agent" name="agent"
                        id="agent">
                    <label  for="anegt">Agents</label>
                </div>
                <div >
                    <input  type="checkbox" id="spaces" name="spaces" id="spaces"
                        value="spaces">
                    <label  for="spaces">Spaces</label>
                </div>
                <button >Search</button>
            </form>
            <div >
                <% if(!currentUser) {%>
                    <a  href="/login">Login</a>
                    <a  href="/register">Register</a>
                    <% } else {%>
                        <a  href="/logout">Logout</a>
                        <% } %>
            </div>
        </div>
    </div>
</nav>

Thanks!

CodePudding user response：

load properly bootstrap js file, I think it will solve your problem

CodePudding user response：

Put Bootstrap script before the closing body tag.

<!-- BOOTSTRAP SCRIPTS -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>