web-dev-qa-db-fra.com

Créez une barre de navigation de type Fixe-vers-bas dans le bootstrap qui glisse le contenu vers le haut lorsqu’on bascule

J'ai deux barres de navigation sur mon site Web, l'une dans l'en-tête et l'autre dans le pied de page

La partie en-tête fonctionne bien, mais ce que je veux, c'est que le pied de page devrait ressembler à celui de la barre de navigation, mais lorsque je passe en vue mobile (plus petite fenêtre), un bouton bascule (fonctionnalité d'amorçage par défaut) s'affiche, mais lorsque vous cliquez dessus, , et le contenu est affiché en dessous de la barre de navigation, en dépit, vers le haut, alors, quelqu'un peut-il m'aider à cet égard?

Je ne sais pas comment inclure Bootstrap dans Fiddle, afin de publier directement mon code de pied de page. il inclut des fichiers d’amorçage et des fichiers Fontawesome directement dans mon ordinateur.

Vous avez Bootply link: http://bootply.com/104001

<footer>
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer-body">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <ul class="footer-bar-btns visible-xs">
                    <li><a href="#" class="btn" title="History"><i class="fa fa-2x fa-clock-o blue-text"></i></a></li>
                    <li><a href="#" class="btn" title="Favourites"><i class="fa fa-2x fa-star yellow-text"></i></a></li>
                    <li><a href="#" class="btn" title="Subscriptions"><i class="fa fa-2x fa-rss-square orange-text"></i></a></li>
                </ul>
            </div>
            <div class="navbar-collapse collapse" id="footer-body">
                <ul class="nav navbar-nav">
                    <li><a href="#">Browse Our Library</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Our Partners</a></li>
                    <li><a href="#">User Review</a></li>
                    <li><a href="#">Terms &amp; Conditions</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>
javascriptjquerytwitter-bootstraptwitter-bootstrap-3navbar
13
Deepak Yadav

J'ai pu obtenir que cela fonctionne en changeant simplement l'ordre. Au lieu de placer votre en-tête de barre de navigation avant vos éléments réduits, placez-le après. De cette façon, vous ne comptez pas sur le positionnement et ne recevez pas de flash/saut tandis que la barre d'en-tête et le bouton Développer se déplacent vers le bas.

Voici une démo: http://www.bootply.com/117444

Tout ce que je fis, c’est de déplacer les éléments d’effondrement div devant le "en-tête" avec le bouton

19
Tanner Lindsay

Si je comprends votre question, vous souhaitez que le menu à bascule s'affiche en haut au lieu de se placer sous le bouton. Pour ce faire, vous devez positionner de manière absolue le menu Collaspe.

footer .navbar-collapse.in {
    bottom: 70px;
    position: absolute;
    background-color:#333;
    width:100%;
}

Démo Bootply: http://bootply.com/103653

1
Zim

Correction de la solution Skelly.

Ajoutez un autre CSS:

@media screen and (max-width: 768px) {
  footer .navbar-collapse {
    position: absolute;
    bottom: 70px;
    width: 100%;
    background-color: #303030;
  }
}

http://www.bootply.com/4b6cSUMTzg

1
Akairis