Navbar with problems

0

I am doing a project, and when I reduce the screen, navbar changes to the mobile standard, making it responsive, then when I click on the 3 scales of the navbar menu, it downloads the content and displays normally, but when I click again, it does not come back ... just like in the image, that is, it does not return to normal as it should. Where might the error be?

<!DOCTYPEhtml><html><head><metacharset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

<body>
    <div class="container">
        @{
            Projeto.Models.Pessoa pessoa = Projeto.Repositorios.Funcoes.GetUsuario();
            string nome;
            int acesso = 0;
            int id = 0;
            if (pessoa == null)
            {
                <div class="navbar navbar-inverse navbar-fixed-top">
                        <div class="container">
                            <div class="navbar-header">
                                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" type="button">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                @Html.ActionLink("Projeto", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
                            </div>
                            <center>
                                <div class="navbar-collapse collapse">
                                    <form action="~/Publico/Logar" method="post" class="navbar-form navbar-right" role="search">
                                        <div class="form-group">
                                            <input type="text" id="email" class="form-control" name="email" placeholder="E-mail" required="required" autocomplete="on" />
                                        </div>
                                        <div class="form-group">
                                            <input type="password" id="senha" class="form-control" name="senha" placeholder="Senha" required="required" autocomplete="off" />
                                        </div>
                                        <input type="submit" value="Entrar" class="btn btn-default" />
                                    </form>
                                </div>
                            </center>
                        </div>
                    </div>
                }
            else
            {
                id = pessoa.PessoaID;
                nome = pessoa.Nome;
                if (pessoa.Tipo == 2)
                {
                    <div class="navbar navbar-default navbar-fixed-top">
                        <div class="container">
                            <div class="navbar-header">
                                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                @Html.ActionLink("Projeto", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
                            </div>
                            <div class="navbar-collapse collapse">
                                <ul class="nav navbar-nav">
                                    <li>@Html.ActionLink("Lista", "Index", "pessoa")</li>
                                    <li>@Html.ActionLink("Cadastrar", "Create", "pessoa")</li>
                                    <li>@Html.ActionLink("Editar", "Edit/" + @id, "pessoa")</li>
                                    <li>@Html.ActionLink("Sair", "Logoff", "Publico")</li>
                                </ul>
                                <p class="navbar-right navbar-brand" style="font-size:medium">Bem-vindo @nome</p>
                            </div>
                        </div>
                    </div>
                }

            }
            <div class="container body-content">
                @RenderBody()
                <footer class="footers">
                    <p class="footers" style="color:black">&copy; @DateTime.Now.Year - Tribus - Oruam</p>
                </footer>
            </div>
            @Scripts.Render("~/bundles/jquery")
            @Scripts.Render("~/bundles/bootstrap")
            @Scripts.Render("~/bundles/inputmask")
            @RenderSection("scripts", required: false)
        }


        <script>
            (function (i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date(); a = s.createElement(o),
                m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
            })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

            ga('create', 'UA-85534546-1', 'none');
            ga('send', 'pageview');

        </script>
    </div>
</body>
</html>

<style>
    .footers {
        width: 90%;
        bottom: 0;
        text-align: center;
        position: absolute;
    }

    html, body {
        height: 100%;
    }

    .geral {
        min-height: 100%;
        position: relative;
        width: 800px;
    }



    #box {
        height: 100%;
        width: 100%;
        background-position: center;
    }

    #fixedbutton {
        bottom: 0;
        position: relative;
    }
</style>
    
asked by anonymous 21.10.2016 / 19:25

1 answer

2

Try to use this code, if you are with the jQuery library, if it is not, just paste this code into <head> :

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    $(document).on( 'click', '#seuMenu', function() {
         $('.container-menu').slideToggle('slide');
    });
</head>

And this code below you use for the menu to function properly. Do not forget to change the selectors.

$(document).on( 'click', '#seuMenu', function() {
    $('.container-menu').slideToggle('slide');
});
    
21.10.2016 / 20:52