Sticky-top Bootstrap Does Not Work

Asked

Viewed 485 times

1

Can you tell me if I need to change anything in my CSS or JS to run Bootstrap Sticky-top?

I am using version 4.5 of Bootstrap and CSS formatting just put a Height manually in the menu, the rest is just Bootstrap.

Follows my code:

@* Verifica se tem usuário logado, caso não esteja redireciona para a tela de login *@

@if (Session["userLog"] == null) { Location.href = "http://www.acessoseg.com.br/PortalAraguaina"; }

@@

<title>@ViewBag.Title</title>
<link rel="icon" href="~/Content/Imagens/logo_araguaina.ico" />
<link rel="stylesheet" href="~/bootstrap-4.0.0-beta.2-dist/css/bootstrap.min.css" />
@*<link rel="stylesheet" href="~/Content/css/formulario.css" />*@
<link rel="stylesheet" href="~/Content/css/principal-araguaina.css" />
<link rel="stylesheet" href="~/Content/css/formulario.css" />


@* Inicio do cabeçalho do site *@
<div class="row container-fluid">
    <div class="col-md-4">
        <img height="60" src="~/Content/Imagens/Logo-Prefeitura-De-Araguaina (1).png" />
    </div>
    <div class="col-md-5 d-md-flex justify-content-start mt-md-3">
        <h2>Gestor Rodoviário de Araguaína</h2>
    </div>
    <div class="col-md-3 d-md-flex justify-content-end">
        <img height="60" src="~/Content/Imagens/Logo ASTT e Acesso.png" />
    </div>
</div>


@*<div class="row">
    <div class="col-md-5  ml-md-5" style="margin-top: 1em;">
        <h2>Gestor Rodoviário de Araguaína</h2>
    </div>
</div>*@
@*<div class="form-row">
    <div>
        <p>Olá, @Session["nomeUsuario"]!</p>
    </div>
</div>
<div class="form-row">
    <div>
        <div>
            <a href="@Url.Action("Logout", "Usuario")">sair</a>
        </div>
    </div>
</div>*@
@* Fim do cabeçalho do site *@

@* Inicio do menu responsivo com Bootstrap *@
@if ((string)Session["perfil"] != "GUARITA")
{
    <div>
        <nav class="navbar sticky-top navbar-expand-md navbar-dark bg-dark" style="height: 35px;">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        @{
                            if ((string)Session["perfil"] == "ADMINISTRADOR")
                            {
                                @*<a class="nav-link" href="@Url.Action("ListaAtivosEExpirados", "Aviso")">Home<span class="sr-only">(current)</span></a>*@
                                <a class="nav-link" href="@Url.Action("Index", "Usuario")">Home<span class="sr-only">(current)</span></a>
                            }
                            else
                            {
                                @*<a class="nav-link" href="@Url.Action("ListaPartidasChegadasRecentes", "Partida")">Home<span class="sr-only">(current)</span></a>*@
                                <a class="nav-link" href="@Url.Action("Index", "Usuario")">Home<span class="sr-only">(current)</span></a>
                            }
                        }

                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Cadastros
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="@Url.Action("FormEmpresa", "Empresa")">Empresa</a>
                            <a class="dropdown-item" href="@Url.Action("FormCadastroLinha", "Linha")">Linha</a>
                            <a class="dropdown-item" href="@Url.Action("FormCadastroUsuario", "Usuario")">Usuário</a>
                            <a class="dropdown-item" href="@Url.Action("ListaAtivosEExpirados", "Aviso")">Aviso</a>
                            <a class="dropdown-item" href="@Url.Action("UploadFile", "Upload")">Enviar Logo</a>
                            <a class="dropdown-item" href="#">Calendário</a>
                            @*<div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>*@
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Itinerários
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="@Url.Action("ListaLinhas", "Linha")">Cadastro de Partida</a>
                            <a class="dropdown-item" href="@Url.Action("EscolheDataPartida", "Partida")">Lista Itinerários</a>
                            <a class="dropdown-item" href="@Url.Action("ControladorPartidasChegadas", "Partida")">Efetivar Partidas e Chegadas</a>
                            <a class="dropdown-item" href="@Url.Action("ListaPartidasChegadasRecentes", "Partida")">Lista Itinerários Painel</a>
                            @*<a class="dropdown-item" href="#">Another action</a>
                                  <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>*@
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Cartões
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Cadastro de Cartão</a>
                            <a class="dropdown-item" href="#">Lote Cartão</a>
                            <a class="dropdown-item" href="#">Cartão / Empresa</a>
                            @*<a class="dropdown-item" href="#">Another action</a>
                                  <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>*@
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Acessos
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Controle de Acesso</a>
                            @*<a class="dropdown-item" href="#">Another action</a>
                                  <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>*@
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Equipamentos
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="@Url.Action("TipoEqpto", "TipoEqpto")">Tipo de Equipamento</a>
                            <a class="dropdown-item" href="#">Cadastro de Equipamento</a>
                            @*<a class="dropdown-item" href="#">Another action</a>
                                  <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>*@
                        </div>
                    </li>

                    @*<li class="nav-item">
                            <a class="nav-link disabled" href="#">Disabled</a>
                        </li>*@
                </ul>
                @*<form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                    </form>*@
            </div>
        </nav>
    </div>
}
else
{
    <div>
        <nav class="navbar sticky-top navbar-expand-md navbar-dark bg-dark" style="margin-top: 1em;">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="@Url.Action("ControladorPartidasChegadas", "Partida")">Home<span class="sr-only">(current)</span></a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
}
@* Fim do menu responsivo com Bootstrap *@


<div class="col-md-12 row  mt-md-1">
    <div class="col-md-9  d-md-flex justify-content-md-start">
        <h2>@ViewBag.SubTitulo</h2>
    </div>
    <div class="col-md-3  d-md-flex justify-content-md-end">
        <button class="btn btn-outline-light btn-sm dropdown-toggle" style="border: none; color: black; font-weight: 600;" type="button" id="botaoUsuario" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img src="~/Content/Imagens/ic_person_black_18dp_1x.png" /> @Session["nomeUsuario"]!
        </button>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="@Url.Action("FormAtualizaUsuario", "Usuario")">Editar</a>
            <a class="dropdown-item" href="@Url.Action("Logout", "Usuario")">Sair</a>
        </div>
    </div>
</div>



@* Inicio das mensagens de erros *@

<div id="msgErro" class="row container-fluid">
    <div class="col-md-12 d-md-flex justify-content-md-center">
        <p class="alerta-erro" style="color: red; font-weight: 600; font-size: 16px; margin-top: 1em;">@Session["alertaErro"]</p>
    </div>
</div>
<div id="msgSucesso" class="row container-fluid">
    <div class="col-md-12 d-md-flex justify-content-md-center">
        <p class="alerta-sucesso" style="color: green; font-weight: 600; font-size: 16px;">@Session["alertaSucesso"]</p>
    </div>
</div>
@* Fim das mensagens de erros *@


<script type="text/javascript">
    //Script para sumir com as mensagens de erro após um tempo
    setTimeout(function () {

        @{
                Session["alertaSucesso"] = null;
                Session["alertaErro"] = null;
            }
        //msgErro.style.display = "none";
        //msgSucesso.style.display = "none";

    }, 5000);

</script>

<script type="text/javascript" src="~/scripts/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="~/bootstrap-4.0.0-beta.2-dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="~/scripts/js/bootbox.min.js"></script>

<div>
    @RenderBody()
</div>
html css bootstrap

  • guy puts the full code of html and other css if you have it will facilitate.

  • Guy depends on the browser you are testing. I’m not sure anymore most do not support this element.

  • @Leandro I am using Chrome version 62. Yes, I have looked at https://caniuse.com/#search=Sticky

  • @hugocsl, face the code is too big. I’m not using CSS, all mounted only with bootstrap

1 answer

0


Diego in Chrome 6.2 and FF Quantum worked normally. I don’t know if it has to do, but in this code you pasted there notice that the tag you used is not closed... Execute the code there for you see

<!DOCTYPE html>
<html lang="en">

<head>
    <title>MCVE</title>
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

    <title>ViewBag.Title</title>

    <style>





    </style>
</head>

<body>


        
        <div class="row container-fluid">
    <div class="col-md-4">
        <img height="60" src="~/Content/Imagens/Logo-Prefeitura-De-Araguaina (1).png" />
    </div>
    <div class="col-md-5 d-md-flex justify-content-start mt-md-3">
        <h2>Gestor Rodoviário de Araguaína</h2>
    </div>
    <div class="col-md-3 d-md-flex justify-content-end">
        <img height="60" src="~/Content/Imagens/Logo ASTT e Acesso.png" />
    </div>
</div>


<div class="row">
    <div class="col-md-5  ml-md-5" style="margin-top: 1em;">
        <h2>Gestor Rodoviário de Araguaína</h2>
    </div>
</div>
<div class="form-row">
    <div>
        <p>Olá, Session["nomeUsuario"]!</p>
    </div>
</div>
<div class="form-row">
    <div>
        <div>
            <a href="Url.Action("Logout", "Usuario")">sair</a>
        </div>
    </div>
</div>

    
        <nav class="navbar sticky-top navbar-expand-md navbar-dark bg-dark" style="height: 35px;">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">

                                <a class="nav-link" href="Url.Action("ListaAtivosEExpirados", "Aviso")">Home<span class="sr-only">(current)</span></a>

                                <a class="nav-link" href="Url.Action("ListaPartidasChegadasRecentes", "Partida")">Home<span class="sr-only">(current)</span></a>


                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Cadastros
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="Url.Action("FormEmpresa", "Empresa")">Empresa</a>
                            <a class="dropdown-item" href="Url.Action("FormCadastroLinha", "Linha")">Linha</a>
                            <a class="dropdown-item" href="Url.Action("FormCadastroUsuario", "Usuario")">Usuário</a>
                            <a class="dropdown-item" href="Url.Action("ListaAtivosEExpirados", "Aviso")">Aviso</a>
                            <a class="dropdown-item" href="Url.Action("UploadFile", "Upload")">Enviar Logo</a>
                            <a class="dropdown-item" href="#">Calendário</a>
                            <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Itinerários
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="Url.Action("ListaLinhas", "Linha")">Cadastro de Partida</a>
                            <a class="dropdown-item" href="Url.Action("EscolheDataPartida", "Partida")">Lista Itinerários</a>
                            <a class="dropdown-item" href="Url.Action("ControladorPartidasChegadas", "Partida")">Efetivar Partidas e Chegadas</a>
                            <a class="dropdown-item" href="Url.Action("ListaPartidasChegadasRecentes", "Partida")">Lista Itinerários Painel</a>
                            <a class="dropdown-item" href="#">Another action</a>
                                  <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Cartões
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Cadastro de Cartão</a>
                            <a class="dropdown-item" href="#">Lote Cartão</a>
                            <a class="dropdown-item" href="#">Cartão / Empresa</a>
                            <a class="dropdown-item" href="#">Another action</a>
                                  <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Acessos
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Controle de Acesso</a>
                            <a class="dropdown-item" href="#">Another action</a>
                                  <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Equipamentos
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="Url.Action("TipoEqpto", "TipoEqpto")">Tipo de Equipamento</a>
                            <a class="dropdown-item" href="#">Cadastro de Equipamento</a>
                            <a class="dropdown-item" href="#">Another action</a>
                                  <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>

                    <li class="nav-item">
                            <a class="nav-link disabled" href="#">Disabled</a>
                        </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                    </form>
            </div>
        </nav>
    

    <div>
        <nav class="navbar sticky-top navbar-expand-md navbar-dark bg-dark" style="margin-top: 1em;">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="Url.Action("ControladorPartidasChegadas", "Partida")">Home<span class="sr-only">(current)</span></a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>



<div class="col-md-12 row  mt-md-1">
    <div class="col-md-9  d-md-flex justify-content-md-start">
        <h2>ViewBag.SubTitulo</h2>
    </div>
    <div class="col-md-3  d-md-flex justify-content-md-end">
        <button class="btn btn-outline-light btn-sm dropdown-toggle" style="border: none; color: black; font-weight: 600;" type="button" id="botaoUsuario" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img src="~/Content/Imagens/ic_person_black_18dp_1x.png" /> Session["nomeUsuario"]!
        </button>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="Url.Action("FormAtualizaUsuario", "Usuario")">Editar</a>
            <a class="dropdown-item" href="Url.Action("Logout", "Usuario")">Sair</a>
        </div>
    </div>
</div>





<div id="msgErro" class="row container-fluid">
    <div class="col-md-12 d-md-flex justify-content-md-center">
        <p class="alerta-erro" style="color: red; font-weight: 600; font-size: 16px; margin-top: 1em;">Session["alertaErro"]</p>
    </div>
</div>
<div id="msgSucesso" class="row container-fluid">
    <div class="col-md-12 d-md-flex justify-content-md-center">
        <p class="alerta-sucesso" style="color: green; font-weight: 600; font-size: 16px;">Session["alertaSucesso"]</p>
    </div>
</div>

<div>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
        <li>item11</li>
        <li>item12</li>
        <li>item13</li>
        <li>item14</li>
        <li>item15</li>
        <li>item16</li>
        <li>item17</li>
        <li>item18</li>
        <li>item19</li>
        <li>item20</li>
        <li>item21</li>
        <li>item22</li>
        <li>item23</li>
        <li>item24</li>
        <li>item25</li>
        <li>item26</li>
        <li>item27</li>
        <li>item28</li>
        <li>item29</li>
        <li>item30</li>
        <li>item31</li>
        <li>item32</li>
        <li>item33</li>
        <li>item34</li>
        <li>item35</li>
        <li>item36</li>
        <li>item37</li>
        <li>item38</li>
        <li>item39</li>
        <li>item40</li>
        <li>item41</li>
        <li>item42</li>
        <li>item43</li>
        <li>item44</li>
        <li>item45</li>
        <li>item46</li>
        <li>item47</li>
        <li>item48</li>
        <li>item49</li>
        <li>item50</li>
        <li>item51</li>
        <li>item52</li>
        <li>item53</li>
        <li>item54</li>
        <li>item55</li>
        <li>item56</li>
        <li>item57</li>
        <li>item58</li>
        <li>item59</li>
        <li>item60</li>
    </ul>
</div>

<script type="text/javascript">
    //Script para sumir com as mensagens de erro após um tempo
    setTimeout(function () {

        {
                Session["alertaSucesso"] = null;
                Session["alertaErro"] = null;
            }
        //msgErro.style.display = "none";
        //msgSucesso.style.display = "none";

    }, 5000);

</script>



<div>
    RenderBody()
</div>




</body>

</html>

  • Which tag I left open hugocsl?

  • @Diegogrossi in the question you asked here on the site, you put "<Nav class="navbar Sticky-top navbar-expand-Md navbar-dark bg-dark" style="height: 35px;">" was missing a </nav> to close! It should look like this <nav>menu</nav>. You tested it, it worked?

  • My code is closed, I didn’t want to copy everything because it’s too big. I’ll edit the question to get the whole code.

  • @Diegogrossi Young I circled here the way you gave your project has a lot of dependency that I don’t have. But just take a <div> that has all the <Nav> inside. It was like this <div><nav> ... </nav></div>. I only took the **div** outside and it worked. I edited the answer code, look there.

  • hugocsl, that’s right. I don’t even know why I had that <div> there. I took it and I ran it right! Thank you very much master!

Browser other questions tagged html css bootstrap

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