Bootstrap Navbar overtop Carrousel

Avoir un léger problème avec le positionnement de ma barre de navigation. J'ai ma barre de navigation de la façon dont j'aimerais (détaché du haut un peu comme dans cet exemple: http://getbootstrap.com/examples/carousel/), mais les images de mon carrousel fin en dessous de la barre de navigation.

Je voudrais que les images de mon carrousel de prolonger le chemin vers le haut de la page et la barre de navigation qui se chevauchent dans la partie supérieure du carrousel (comme dans l'exemple ci-dessus). J'ai joué un peu avec le rembourrage, mais le plus que je peux obtenir le carousel d'images pour étendre du bas de la barre de navigation. J'ai joint les extraits de code pour la barre de navigation, et à carrousel carrousel css ci-dessous. Toute aide serait très apprécié, merci d'avance

Code barre de navigation:

<div class="container">
  <div class="navbar navbar-inverse" role="navigation">  <!navbar-inverse is black, navbar-default is grey>


    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand">Derby Days 2014</a>
    </div>

    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Donate</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Events <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Penny Wars</a></li>
            <li><a href="#">Wonderful Wednesday</a></li>
            <li><a href="#">Lip Sync</a></li>
            <li><a href="#">Concert</a></li>
          </ul>
        </li>
        <li><a href="#">FAQ</a></li>
      </ul>
    </div><!--/.nav-collapse -->
   </div>
</div>

Code pour Carrousel:

Code CSS pour carrousel:

.carousel {position: relative;}

.carousel-inner {position: relative; width: 100%; overflow: hidden;}

InformationsquelleAutor Caleb Addington | 2014-01-16

9

Je crois que c'est ce que vous essayez d'atteindre?

Js Fiddle
```
.bannerContainer {
    position:relative;     
}
.carousel {
    position:absolute;
    top:0;    
}
.navbar {
    position:absolute;
    top:30px;
    z-index:10;
    background:#fff;
    width:100%;
}
```
Vous souhaitez envelopper absolue placé de divs (nav et carrousel) dans un div qui est relatif.
- Super! N'oubliez pas de vérifier que la réponse.
- veuillez cocher ce que la réponse si il a aidé.
InformationsquelleAutor Jamie Collingwood
5

Vous pouvez overright l'existant bootstrap css avec cela,vous pouvez utiliser position:fixe ou position:absolute
```
.navbar{
      position:absolute;
      width:100%;
      z-index:10;
      max-width:100%;
}
```
Voici de travail codepen exemple

InformationsquelleAutor Nikhil Raj A
2

//Pour obtenir la barre de navigation pour s'asseoir sur le dessus du carrousel.

CSS:
```
.navbar {
position:absolute
}
```
//Pour centrer l'image et ajouter un peu de rembourrage au-dessus d'elle afin de compenser pour la barre de navigation.

CSS:
```
.carousel-inner > .item > img {
    margin: 0 auto;
    padding-top: 50px;
}
```
A fonctionné pour moi à tout le moins, donc voilà en espérant que cela vous aide à vous (et d'autres). Des acclamations.
- J'ai essayé de faire de mon custom drop-down menu de navigation apparaît sur le carrousel (qui couvre une partie du carrousel du contenu). position:absolute avec une assez grande z-index est ce qu'il a fait pour moi. Merci @SomeGuy!
InformationsquelleAutor Some Guy

Sur le lien exemple, ils ont utilisé un wrapper en dehors de la valeur liquidative .navbar-wrapper avec une absolue placement et d'une marge de 20px (lorsque la fenêtre d'affichage de la largeur est plus grande que 768px).

Voici le code utilisé pour le faire fonctionner:

.navbar-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 20;
}

.navbar-wrapper .container {
   padding-left: 0;
   padding-right: 0;
}

.navbar-wrapper .navbar {
   padding-left: 15px;
   padding-right: 15px;
}

@media (min-width: 768px) {
  .navbar-wrapper {
    margin-top: 20px;
  }
}

InformationsquelleAutor denoise

voici ce qui a fonctionné pour moi:

Mettre le carrousel dans un article et de le rendre absolue

Faire la barre de navigation absolue trop

     <section id="home">
          <div id="carouselExampleIndicators" class="carousel slide" data- 
          ride="carousel">....
    </section>
     //the navbar
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top  mynav" >... 
    </nav>

////////CSS

.mynav{
    position: absolute;
  }
.home{
    position: absolute;
}

InformationsquelleAutor Eljeddi Oussema

Vous devez vous connecter pour publier un commentaire.