Search code examples
javascripthtmlasp.net-mvcasp.net-corebootstrap-5

VS 2022 ASP.Net Core MVC Simple Bootstrap Menu Not Working

I have a simple ASP.Net Core 8 site created in VS 2022. I have installed Bootstrap 5.3.3, jQuery 3.7.1 using libman and copied the simplest Menu sample from GetBootstrap. When the screen width is small, the menu disapears and the burger bars are shown but nothing happens when I click on it? What have I done wrong?

libman.json

    {
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "provider": "cdnjs",
      "library": "[email protected]",
      "destination": "wwwroot/lib/jquery/"
    },
    {
      "provider": "cdnjs",
      "library": "[email protected]",
      "destination": "wwwroot/lib/"
    },
    {
      "provider": "cdnjs",
      "library": "[email protected]",
      "destination": "wwwroot/lib/bootstrap/"
    }
  ],
  "version": "1.0"

HTML of page:

<!DOCTYPE html>
<html lang="en-ie">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="~/css/custom.css" rel="stylesheet" />
    <script src="~/lib/jquery/jquery.js"></script>

</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">Your App</a>
            <button class="navbar-toggler"
                    type="button"
                    data-toggle="collapse"
                    data-target="#navbarNav"
                    aria-controls="navbarNav"
                    aria-expanded="false"
                    aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        <p>test</p>
    </div>
    <script src="~/lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Solution

  • When the screen width is small, the menu disapears and the burger bars are shown but nothing happens when I click on it?

    You can try to modify the code of toggler button to specify data-bs-toggle and data-bs-target attributes as below.

    <a class="navbar-brand" href="#">Your App</a>
<button class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>