CODEWITHSUNDEEP
htmlcssbootstrap-4
Analise Burtet
Analise Burtet

Reputation: 11

nav button not closing the menu when clicked again

I have searched a lot, but havent found a simple solution for the problem. When you click the button it opens and do not close again, any suggestion of what can be missing? Thanks in advance 

<nav class="navbar navbar-expand-md sticky-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <img src="midia/logo.jpg" alt="Tutto Piccolo">
        </a>
        <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarResponsive" >
            <span class="navbar-toggler-icon"> </span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#sobre">Sobre a Tutto</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#colecao">Coleção</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contato">Contato</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#cliente">Área do Cliente</a>
                </li>
            </ul>

        </div>

    </div>
</nav>

Upvotes: 1

Views: 69

Answers (1)

MatrixTXT
MatrixTXT

Reputation: 2502

In Bootstrap Docs, it states that

Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.

So, change <nav class="navbar navbar-expand-md sticky-top"> to <nav class="navbar sticky-top">

JSfiddle example.

Upvotes: 1

Related Questions