Bootstrap navbar - suppression d'en-tête fixe à partir d'appareils mobiles

Comment puis-je modifier l'en-tête ne soit pas fixée pour les appareils mobiles, mais fixe pour la md et lg tailles d'écran?

Par exemple, vous pouvez changer la valeur liquidative de la classe d';

Mobile: <nav class="navbar navbar-default" role="navigation">

Bureau: <nav class="navbar navbar-default navbar-fixed-top" role="navigation">

??

<nav 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-brand-centered">
        <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="navbar-brand navbar-brand-centered">Brand</div>
    </div>
    <div class="collapse navbar-collapse" id="navbar-brand-centered">
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>           
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

OriginalL'auteur man-oh-man | 2015-01-09

  1. 6

    Vous souhaitez isoler à partir d'appareils mobiles ou de plus petites tailles d'écran? Il y a une différence. Si vous voulez le dernier:

    HTML:

    <nav class="navbar navbar-default navbar-static-top" role="navigation">

    CSS: 

    @media (min-width:992px) {

    body {padding-top:HEIGHTOFNAVBAR}
    .navbar-static-top {position:fixed;top:0;right:0;left:0;}

}

    Si vous voulez effectivement éviter fixe de la navigation sur les appareils mobiles, vous pouvez détecter si oui ou non l'appareil est en contact ou non avec le javascript.

    /* --------------- SUPPORTS TOUCH OR NOT for IOS, Android, and Windows Mobile --------------- */
/*! Detects touch support and adds appropriate classes to html and returns a JS object  |  Copyright (c) 2013 Izilla Partners Pty Ltd  | http://www.izilla.com.au /Licensed under the MIT license  |  https://coderwall.com/p/egbgdw */
var supports = (function() {
    var d = document.documentElement,
        c = "ontouchstart" in window || navigator.msMaxTouchPoints;
    if (c) {
        d.className += " touch";
        return {
            touch: true
        }
    } else {
        d.className += " no-touch";
        return {
            touch: false
        }
    }
})();

    Ensuite, vous pouvez utiliser les balises HTML (le même):

    <nav class="navbar navbar-default navbar-static-top" role="navigation">

    CSS

      .no-touch body {padding-top:HEIGHTOFNAVBAR}
  .no-touch .navbar-static-top {position:fixed;top:0;right:0;left:0;}
    Ne pouvez pas sembler obtenir celui-ci à travailler - c'est seulement pour les appareils mobiles ou les tablettes ou ordinateur de bureau.
    Lequel? Il y a deux options, l'une est juste le CSS et c'est seulement pour les largeurs d'écran et l'autre à l'aide de CSS et js.
    Bonjour Christina, tous les deux, mais c'est jeter mon nav descendre en bas de la page, à gauche
    Aucun moyen de savoir à moins que vous fournissez un lien vers un exemple. Position fixe a besoin d'une position ou d'une largeur, donc .navbar-statique-haut quand il est fixe aurait besoin left:0;right:0; width:100%, mais je ne sais pas précisément, à moins de fournir un lien.
    Aussi peuvent avoir besoin d'une position de tête quand il est fixe.

    OriginalL'auteur Christina

  2. 5

    Pour définir la aucun en-tête fixe pour les mobiles est pas dur, c'est juste une CSS propety:

    CSS

    .headerclass { position:static;} //over rides the position fixed

    En train de changer les classes est un peu plus difficile, mais ce que vous pouvez faire est d'accrocher la requête de média changements. Ce qui doit être fait avec Jquery (livré avec bootstrap).

    Vous avez à la recherche pour le css changements.
    Si nous avons mis un peu de valeur sur une requête de média alors nous pouvons basculer classes.

    CSS

    @media only screen 
and (min-device-width : 1224px) {
    width:300px;
}

    JavaScript Jquery

    var navbar = $('navbar');
if (navbar.css('width') == '300px') {
    navbar.addClass('navbar-default navbar-fixed-top');
}

    - Je utiliser ces mesures : Lien

    La position: static est utile. Si vous n' $(document).ready (), puis retirez la navbar-fixed-top de la classe, il a quelques indésirables de l'écran clignote.

    OriginalL'auteur Persijn