Fixed menu problem with bootstrap

Navigation
0

I have a problem in the menu of the site I'm creating, I took a style from a menu of Boostrap , where it was fixed, I made some changes to the CSS menu (nothing more ). But when I go down the page the menu does not come together, ie it is not fixed at the top.

Menu HTML code: 

<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>

Menu CSS: 

.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.

    
asked by anonymous 07.11.2017 / 17:31

2 answers

1

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

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

Or remove the fixed-top class from nav, if you want it not to be that way.

    
07.11.2017 / 20:49
1

Remove the tag class nav fixed-top leave it like this 

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

There your menu will not stay fixed.

    
07.11.2017 / 18:22
How to hide the token generated in the url by laravel Go through the Python dictionary from the end