sticky-top Bootstrap does not work

Navigation
1

Can you tell me if I need to change something in my CSS or JS to run the Bootstrap sticky-top?

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

Follow my code: 

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

@if (Session ["userList"] == null) {              location.href=" link ";      }

         @ @ 

<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>
    
asked by anonymous 01.12.2017 / 14:51

1 answer

0

Diego on Chrome 6.2 and FF Quantum worked normally. I do not know if it has to do, but in this code that you pasted there notice that the tag you used is not closed ... Run the code there so you can 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>
    
01.12.2017 / 17:22
I am having trouble inserting data into a table with php Calculate average growth percentage with PHP