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 >
        <!-- Container wrapper -->
        <div >
            <!-- Navbar brand -->
            <a  asp-controller="Main" asp-action="MaIndex">
                <i ></i> Welcome
            </a>

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

            <!-- Collapsible wrapper -->
            <div  id="navbarButtonsExample">
                <!-- Left links -->
                <ul >
                    <li >
                        <a  asp-controller="Language" asp-action="LaIndex">Learning HUB</a>
                    </li>
                    <li >
                        <a  href="#">Upload files</a>
                    </li>
                </ul>
                <!-- Left links -->

                <div >
                    <form method="post" asp-action="logout" asp-controller="account">
                        <button type="submit"  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.

CodePudding user response：

this worked for me.

<nav >
        <!-- Container wrapper -->
        <div >
            <!-- Navbar brand -->
            <a  asp-controller="Main" asp-action="MaIndex">
                <i ></i> Welcome
            </a>

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

            <!-- Collapsible wrapper -->
            <div  id="navbarTogglerDemo01">
                <!-- Left links -->
                <ul >
                    <li >
                        <a  asp-controller="Language" asp-action="LaIndex">Learning HUB</a>
                    </li>
                    <li >
                        <a  href="#">Upload files</a>
                    </li>
                    <li >
                        <a  asp-controller="Administration" asp-action="ListRoles">List roles</a>
                    </li>
                </ul>
                <!-- Left links -->

                <div >
                    <form method="post" asp-action="logout" asp-controller="account">
                        <button type="submit"  style="width:auto">
                            @User.Identity.Name
                        </button>
                    </form>
                </div>
                <!-- Collapsible wrapper -->
            </div>
            <!-- Container wrapper -->
        </div>
    </nav>