Partage
  • Partager sur Facebook
  • Partager sur Twitter

Bootstrap - Problème Sticky Nav

Sujet résolu
12 octobre 2018 à 11:22:44

Salut à tous.

Je rencontre un petit soucis avec ma navbar de Bootstrap. Je souhaite la rendre sticky, j'ai appliqué la classe et tout va bien. Sauf que, lorsque je commence à scroll, la navbar s'arrête à la fin de mon header.

Le code HTML est tout simple :

<header>
        <nav class="navbar navbar-expand-lg sticky-top">
            <a class="navbar-brand" href="#">
                <img class="owl__icon" src="images/redhead.png" style="width: 67px; height: auto;">
            </a>
            <div class="container">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Evenements</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Convertisseur / Télécharger</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Bibliothèque</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Inscription / Connexion</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

Et je n'ai pas spécialement de css ou de JS la concernant, la classe sticky-top de bootstrap devant faire le taff si j'ai bien compris, après si vous voulez celui du header :

header{
    font-family: "Boogaloo";
    min-height: 580px;
    background: url('../images/redOwls.png') center no-repeat;
}

.navbar{
    height: 68px;
    transition: all ease .5s;
    background-color: transparent;
}

.navbar.scrolled{
    transition: all ease .5s;
    background: #ededed;
    box-shadow: 0 2px 2px  rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2);
}

Du coup j'aimerais bien comprendre pourquoi la navbar se stop au header, et je précise qu'il y a du code ensuite, j'ai bloqué mon body à 2500px de hauteur pour avoir un bon scroll, et la nav se bloque à la fin du header.

Si vous avez une petite idée pour me débloquer, je suis preneur, merci !

  • Partager sur Facebook
  • Partager sur Twitter
13 octobre 2018 à 0:00:39

Salut

Sort ton nav du header si tu l'enferme dans le header forcément elle y reste

  • Partager sur Facebook
  • Partager sur Twitter
La fainéantise est un vilain défaut