Fixed menu problem with bootstrap

Question

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.

Answer 1

Remove the class from the Nav tag fixed-top leave her like this

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

Your menu won’t stay fixed.

Answer 2

In the navbar class if you want it to always be visible in the top, add position:fixed; top:0; left:0; at the .navbar. :

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

Or remove the Nav’s Fixed-top class, if you wish not to be so.