Bootstrap navbar-fixed-top ne fonctionne pas

Je suis en utilisant Bootstrap est navbar-top-fixed sur mon site, mais il ne semble pas fonctionner. Quand je scroll vers le bas, il n'est pas fixé à la partie supérieure.

Voici mon code HTML:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="gdgt-menu">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="gdgt-logo">
        <a class="navbar-brand" href="<?php echo get_site_url(); ?>" >brand</a>
      </div>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="nav-items collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <!--my menu is here-->
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Et voici le CSS:

.gdgt-menu{
padding-right: 10%;
padding-left: 10%;
}
@media only screen and (min-width : 200px) and (max-width : 768px) {
.navbar{
margin-bottom: 0px !important;
}
.navbar-collapse {
width: 100%;
}
.menu-header-container{
width: 100%;
}
.gdgt-menu{
padding-right: 0% !important;
padding-left: 0% !important;
}
#bs-example-navbar-collapse-1 .current-menu-item a {
padding-right: 100% !important;
}
}
@media only screen and (min-width : 200px) and (max-width : 768px) {
.featured-content{
width: 100%;
margin-right: 0px !important;
margin-left: 0px !important;
}
}
@media only screen and (min-width : 768px) and (max-width : 1010px) {
.gdgt-menu{
padding-right: 0% !important;
padding-left: 0% !important;
}
.nav-items{
width: 85% !important;
}
}
.nav-items{
width: 70%;
float: right;
}
.navbar{
height: 60px;
display: block;
position: relative;
}
.menu{
margin: 0px !important;
padding-left: 0px !important;
}
.menu-header-container{
float: right;
}
@media only screen and (min-width : 200px) and (max-width : 768px) {
.menu-header-container{
background-color: #2c3e50;
}
.menu li{
width: 100% !important;
}
}
.menu li{
list-style-type: none;
line-height: 60px;
width: auto;
float: left;
transition: all 0.2s ease-in-out;
}
.menu li:hover{
background-color: #34495e;
}
.menu a{
color: #fff;
text-decoration: none;
padding-left: 20px;
padding-right: 20px;
}

Aucune idée de ce qui est à l'origine de ce problème? Je ne suis pas vraiment sûr de savoir pourquoi cela se passe. Cependant, je me sens comme le @media en est la cause.

S'il vous plaît aider 🙂

Probablement parce que vous êtes réglage .navbar { position: relative; } dans votre CSS
Merci! Il a travaillé 🙂

OriginalL'auteur Mehedi Hassan | 2014-10-24

  1. 12

    Vous écrasez initialise par défaut de positionnement de la .fixed-top-navbar.

    De bootsrap.css

    .navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed; /* <-- Look here */
right: 0;
left: 0;
z-index: 1030;
}

    À partir de votre code:

    .navbar{
height: 60px;
display: block;
position: relative; /* <-- Oh dear */
}

    OriginalL'auteur Turnip

  2. 0

    Modifier votre code:

    .navbar {
height: 60px;
display: block;
position: fixed;
}

    OriginalL'auteur Praveen Kumar Purushothaman