0
I’m having a problem on the menu of the site I’m creating, I picked up a style of a ready menu of the Boostrap, where it was fixed, I made some changes to the menu CSS (no big deal). But when I scroll down the page the menu does not come together, that is, it is not fixed at the top.
HTML code from 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 from the 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;
}
Note: I found several similar questions, but I could not solve the problem with their help.
Tries with
position: fixed;
in class.navbar
;– Sam