0

Estou com um problema no menu do site que estou criando, eu peguei um estilo de um menu pronto do Boostrap, onde o mesmo ficava fixo,fiz algumas alterações no CSS do menu (nada de mais).Porém quando desço a página o menu não vem junto, ou seja, não fica fixo no topo.

Código HTML do menu:

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-transparent">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation" >
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="nav-link" href="index.php" id="menu_imagem"><i><img src="imagens/oie_transparent.png"></i></a>
        <div class="collapse navbar-collapse" id="menuSite">
            <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
                <li class="nav-item active" id="menu_assinatura">
                    <a class="nav-link" href="assinatura.php" >Assinatura</a>
                </li>
                <li class="nav-item dropdown active" id="menu_loja_dropdown">
                    <a class="nav-link dropdown-toggle" href="loja.php" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Loja
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="musica.php">Música</a>
                        <a class="dropdown-item" href="lifestyle.php">Lifestyle</a>
                        <a class="dropdown-item" href="assinatura.php">Assinatura</a>
                    </div>
                </li>
                <li class="nav-item active" id="menu_minhaConta">
                    <a class="nav-link" href="minhaconta.php" >Minha conta</a>
                </li>
                <li class="nav-item active" id="menu_Sobre">
                    <a class="nav-link" href="sobre.php">Sobre</a>
                </li>
                <li class="nav-item active" id="menu_Carrinho">
                    <a class="nav-link active " href="carrinho.php">
                        <i class="fa fa-shopping-cart" aria-hidden="true"></i>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

CSS do menu:

.navbar {   
    border-bottom: 2px solid #FFF;
    font-size: 15pt;
    color: #FFF;

}
/**/
#menu_imagem {
    position: relative;
    padding-right: 3%;
}
#menu_assinatura {
    position: relative;
    border: 2px solid #FFF;
    box-shadow: 0px 0px 10px rgba(0,0,0,.5);
    padding-left: 15px;
    padding-right: 15px;
}

Observação: Achei várias perguntas similares, mas não consegui resolver o problema com a ajuda delas.

1
  • 1
    Tenta com position: fixed; na class .navbar;
    – Sam
    7/11/2017 às 18:05

2 Respostas 2

1

Na classe navbar se você deseja que fique sempre visível no top, adicione position:fixed; top:0; left:0; ao .navbar. :

.navbar {   
    border-bottom: 2px solid #FFF;
    font-size: 15pt;
    color: #FFF;
    position:fixed;
    top:0;
    left:0;
}

Ou remova a classe fixed-top da nav, caso deseje que não fique dessa forma.

2
  • 1
    O código que passou está funcionando, obrigado pela ajuda! 8/11/2017 às 16:02
  • Qualquer coisa pode chamar, obrigado pelo retorno!
    – Neo
    8/11/2017 às 16:56
1

Remova a classe da tag nav fixed-top deixa ela assim

<nav class="navbar navbar-expand-md navbar-dark bg-transparent">

Ai seu menu não vai ficar fixo.

2
  • A questão é, o menu precisa ser fixo. 8/11/2017 às 15:57
  • Isso é uma particularidade de sua aplicação, cabe você a decidir. Em alguns casos é bem útil, em outros não. Então legal é analisar os com usuários que é a fonte mais certa nessa decisão. 9/11/2017 às 9:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .