Fixed menu problem with bootstrap

Asked

Viewed 702 times

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.

  • 1

    Tries with position: fixed; in class .navbar;

2 answers

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.

  • The point is, the menu needs to be fixed.

  • This is a particularity of your application, it is up to you to decide. In some cases it is very useful, in others it is not. So cool is to analyze those with users that is the right source in this decision.

1


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.

  • 1

    The code you passed is working, thanks for your help!

  • Anything you can call, thank you for the return!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.