Navbar bootstrap hides items but does not show when clicked

Asked

Viewed 207 times

1

The grouping works when I lower the window, it puts all the items in the hidden menu and shows the button with three "-", but when I click the button it does not show the menus that were hidden, it only reappears if I increase the screen again to a size that fits them.

<script src="Scripts/jquery-3.1.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>


<form id="form1" runat="server" class="container">
    <div>

        <nav class="navbar navbar-inverse">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#minhaNavbar" aria-expanded="false" aria-controls="minhaNavbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <a class="navbar-brand" href="#">Meu menu</a>
                </div>

                <div id="minhaNavbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#agenda">Teste 1</a>
                        </li>
                        <li>
                            <a href="#consulta">Teste 2</a>
                        </li>
                        <li>
                            <a href="#sair">Sair</a>
                        </li>
                    </ul>

                </div>

            </div>
        </nav>

        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>

</form>

css bootstrap

  • I accidentally solved the problem myself. The problem is that I am using a master page and on the pages added to the master page I did not put this line: <meta name="viewport" content="width=device-width, initial-Scale=1, Maximum-Scale=1" /> After putting this line on the other pages everything is working normally.

  • answer your own question, or delete it.

1 answer

2

I accidentally solved the problem myself. The problem is that I am using a master page and on the pages added to the master page I did not put this line: 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

After putting this line on the other pages is working all normally.

Browser other questions tagged css bootstrap

You are not signed in. Login or sign up in order to post.