Why is not working toogle button in navagation menu if I resize a windows?

Question

I have such navigation and it would be responsive, but if I resize the windoes toogle button appear but it does not working.

  <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <!-- Container wrapper -->
        <div class="container">
            <!-- Navbar brand -->
            <a class="navbar-brand me-2" asp-controller="Main" asp-action="MaIndex">
                <i class="far fa-grin-beam-sweat"></i> Welcome
            </a>

            <!-- Toggle button -->
            <button class="navbar-toggler"
                    type="button"
                    data-mdb-toggle="collapse"
                    data-mdb-target="#navbarButtonsExample"
                    aria-controls="navbarButtonsExample"
                    aria-expanded="false"
                    aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
            </button>

            <!-- Collapsible wrapper -->
            <div class="collapse navbar-collapse" id="navbarButtonsExample">
                <!-- Left links -->
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" asp-controller="Language" asp-action="LaIndex">Learning HUB</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Upload files</a>
                    </li>
                </ul>
                <!-- Left links -->

                <div class="d-flex align-items-center">
                    <form method="post" asp-action="logout" asp-controller="account">
                        <button type="submit" class="nav-link btn btn-link py-0" style="width:auto">
                            @User.Identity.Name
                        </button>
                    </form>
                </div>
                <!-- Collapsible wrapper -->
            </div>
            <!-- Container wrapper -->
        </div>
    </nav>
    <!-- Navbar -->

JS Fiddler attached https://jsfiddle.net/mygus/z9o4wk7u/3/

What am I doing wrong?

Thank you, M.

Answer 1

this worked for me.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <!-- Container wrapper -->
        <div class="container-fluid">
            <!-- Navbar brand -->
            <a class="navbar-brand me-2" asp-controller="Main" asp-action="MaIndex">
                <i class="far fa-grin-beam-sweat"></i> Welcome
            </a>

            <!-- Toggle button -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
            </button>

            <!-- Collapsible wrapper -->
            <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                <!-- Left links -->
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" asp-controller="Language" asp-action="LaIndex">Learning HUB</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Upload files</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" asp-controller="Administration" asp-action="ListRoles">List roles</a>
                    </li>
                </ul>
                <!-- Left links -->

                <div class="d-flex align-items-center">
                    <form method="post" asp-action="logout" asp-controller="account">
                        <button type="submit" class="nav-link btn btn-link py-0" style="width:auto">
                            @User.Identity.Name
                        </button>
                    </form>
                </div>
                <!-- Collapsible wrapper -->
            </div>
            <!-- Container wrapper -->
        </div>
    </nav>