Comment faire de la barre de navigation bootstrap pour pousser toute la page sur le menu mobile?

Bien qu'il y est une question connexeson problème semble que ma solution mais je n'ai aucune Idée de progrès à faire.

Je suis en utilisant bootstrap barre de navigation qui est fixé sur le dessus à faire.. menu de navigation.
sur les pages mobiles(où la taille de l'écran est petit), je dois faire en appuyant sur certaines bouton de menu situé en haut à droite coin.

toutefois, lorsque le menu pop-up, j'aimerais qu'il pousser la page vers le bas, au lieu de la superposition.

voici mon code.. ce que vous modifiez dois-je faire pour se débarrasser de la superposition?

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <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" href="#!/">Brand</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#!/notice">notice</a></li>
                <li><a href="#!/board">board</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li>
                <a id="a-logout" href="#!/logout">sign out</a>
                </li>
                <li>
                <a href="#!/user">Your page</a>
                </li>
            </ul>
        </div>
    </div>
</div>

source d'informationauteur thkang

  1. 5

    Il semble que vous avez défini la hauteur de .barre de navigation qui est de forcer menu réduit de superposition. Il suffit de changer la hauteur .barre de navigation pour min-height

    .navbar
{
 min-height:65px; //or value of ur desire
}

    Si pas résolu, veuillez post ur CSS trop

  2. 1

    Vous aurez besoin pour animer le corps vers le bas. J'avais besoin de voir plus de code pour obtenir ce exact, et vous auriez besoin de jQuery, mais essayez ceci...

    $('.navbar').on('click', function() {
    var height = ($('.navbar-collapse.in').length == 0) ? $(this).height() : 0;
    $('body').css({
        marginTop: height
    })
});

    Mise à JOUR: inclure du code pour tenir compte de si la valeur liquidative est in ou out. Ce n'est vraiment pas d'aller travailler bien car vous en aurez besoin pour tirer le plus de ce code après la nav a animée dans le. Vous pouvez cependant supprimer $(this).hauteur() et de le remplacer avec un codées en dur pixel montant égal à la hauteur de votre nav.

  3. 1

    ajouter 

    $('.navbar-toggle').on('click', function() {
  $('.after-navbar').css('margin-top','230px');
});

    S'il vous plaît Trouver de travail exemple ici http://jsfiddle.net/LptkL/

  4. 1

    Peut-être que vous êtes à la recherche pour le max-height:

    CSS

    .navbar-collapse {
    max-height: 150px;
}

    De cette façon, vous aurez une belle barre de défilement pour votre menu.

    Vous pouvez ajuster la max-height selon le window taille à l'aide de la resize événement sur JS.

  5. 1

    Changement navbar-fixed-top à navbar-static-top.