Navbar in trouble

Question

Navbar in trouble

Asked 8 years, 1 month ago

Viewed 123 times

0

I’m doing a project, and when I reduce the screen, the navbar switches to the mobile default, making it responsive, then when I click on the 3 dashes of the navbar menu, it drops the content and displays normally, but when I click again, it doesn’t come back... as in the image, I mean, she doesn’t go back to normal like she’s supposed to. where the error may be?

<!DOCTYPE html>
<html>
<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")
</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>

Put the code so people can help you better, the error can be many different things!

– JuniorNunes

2016/10/21 at 17:30
so I think it might be with some script, because I already opened a new project and copied the navbar of this other project that is working for this project that is not, and has not solved... and about the code, it is too big to put in the comment...

– Fabio Souza

2016/10/21 at 17:38
Just put the parts related to the navbar, because then there’s no way to give you a precise answer, you know?

– JuniorNunes

2016/10/21 at 17:39
You have this site in production to pass the link?

– JuniorNunes

2016/10/21 at 17:40
I edited the post... the site do not have, is a college project, is under development yet, is well cru rs

– Fabio Souza

2016/10/21 at 17:45
the strange thing is that if I copy this code and put in any project here, it works, only in this same... you would know which script is responsible for it?

– Fabio Souza

2016/10/21 at 17:46
It can be a script that is preventing the functioning yes, make a test, try to comment on all the other scripts that your menu does not need and test to see if it will work, if it works you will uncomment one by one and testing, to see which is giving problem.

– JuniorNunes

2016/10/21 at 17:50
the scripts needed to work are these two, if you comment on the two, or one of them no longer works... @Scripts.Render("~/Bundles/jquery") @Scripts.Render("~/Bundles/bootstrap")

– Fabio Souza

2016/10/21 at 17:55
So, as I said comments on all the others, except these!

– JuniorNunes

2016/10/21 at 17:56
yes, I commented and I was doing the process... uncommenting one by one and testing, to see which worked, I tested one, commented again, and uncommented another to test... so I did with all, but I saw that the only two that need to be on the page would be these two, because without one of them it didn’t work... the others are already commented....

– Fabio Souza

2016/10/21 at 17:58
And only with these two enabled the menu continues with the same error?

– JuniorNunes

2016/10/21 at 17:59
this, to work need both, and only the two enabled the error persists...

– Fabio Souza

2016/10/21 at 18:47

Show 7 more comments

1 answer

Browser other questions tagged javascript css asp.net-mvc nav-bar

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

by Jonatas Nardi • **164** points · Answer 1 · 2016-10-21T18:52:04+00:00

Try using this code if you have the jQuery library, if not, just paste this code into the <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 work properly. Do not forget to change the selectors.

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