Breakpoint navbar bootstrap 3.2

Bonjour tout le monde,

Je rencontre un problème que je n'arrive pas du tout à résoudre, et ce, malgré tous les codes trouvés sur internet. J'aimerais que mon menu navbar se mette en toggle à 992px et non 768px.

Pourriez-vous m'aider ?

Merci d'avance, et voici mes codes :

PHP

        <link rel="shortcut icon" href="../images/orasis-logo.png">
<!-- USING BOOTSTRAP 3.0.3 -->
<nav class="navbar navbar-default navbar-fixed-top nav_style" id="nav_style">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="toggle-burger">
        <span class="icon-bar" id="burger"></span>
        <span class="icon-bar" id="burger"></span>
        <span class="icon-bar" id="burger"></span>
      </button>
      <a  id="logo" href="../en/home.php"><img class="logo_nav" src="../images/navbar/logo-orasis.png" alt="orasis-logo"></a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav pull-left" id="menu_nav">
          
          <li id="li_nav" <?php if ($nav_en_cours == 'home') {echo 'class="currentLink"';} ?>><a href="../en/home.php">Home </a></li>
          
          <li id="li_nav" <?php if ($nav_en_cours == 'product') {echo 'class="currentLink"';} ?>><a href="../en/product.php">Remobi &amp; Aideal </a></li>
          
          <li id="li_nav" <?php if ($nav_en_cours == 'research') {echo 'class="currentLink"';} ?>><a href="../en/research.php">Research</a></li>
          
          <li id="li_nav" <?php if (($nav_en_cours == 'workshop')  || ($nav_en_cours == 'seminars') || ($nav_en_cours == 'conferences')) {echo 'class="currentLink"';} ?>><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >Academia <span class="caret"></span></a>
          <div class="dropdown-menu">
            <ul>
                <li class="drop"><a href="../en/workshop.php" class="drop">Workshop</a></li>
                <li class="drop"><a href="../en/seminars.php" class="drop">Seminars</a></li>
                <li class="drop"><a href="../en/conferences.php" class="drop">Conferences</a></li>
            </ul>
          </div>
          </li>
          
          <li id="li_nav" <?php if (($nav_en_cours == 'exposure') || ($nav_en_cours == 'discussion')) {echo 'class="currentLink"';} ?>><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >Clinical rounds <span class="caret"></span></a>
          <div class="dropdown-menu">
            <ul>
                <li class="drop"><a href="../en/exposure.php" class="drop">Exposure</a></li>
                <li class="drop"><a href="../en/discussion.php" class="drop">Discussion</a></li>
            </ul>
          </div>
          </li>        
          
          <li id="li_nav" <?php if ($nav_en_cours == 'community') {echo 'class="currentLink"';} ?>><a href="../en/community.php">Forum</a></li>
          
          <li id="li_nav" <?php if ($nav_en_cours == 'about') {echo 'class="currentLink"';} ?>><a href="../en/about.php">About</a></li>
          
          <li id="li_nav" <?php if ($nav_en_cours == 'login') {echo  'class="currentLink"';} ?>><a href="../en/login.php">Login</a></li>
          
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">En <span class="caret"></span></a>
          <div class="dropdown-menu">
            <ul><?php if ($nav_en_cours == 'home') { $lien = "../fr/accueil.php";} else if ($nav_en_cours == 'product') { $lien = "../fr/produit.php";} if ($nav_en_cours == 'research') { $lien = "../fr/recherches.php";} if ($nav_en_cours == 'workshop') { $lien = "../fr/atelier.php";} if ($nav_en_cours == 'seminars') { $lien = "../fr/seminaires.php";} if ($nav_en_cours == 'conferences') { $lien = "../fr/conferences.php";} if ($nav_en_cours == 'exposure') { $lien = "../fr/cascliniques.php";} if ($nav_en_cours == 'discussion') { $lien = "../fr/discussion.php";} if ($nav_en_cours == 'community') { $lien = "../fr/communaute.php";} if ($nav_en_cours == 'about') { $lien = "../fr/apropos.php";} if ($nav_en_cours == 'login') { $lien = "../fr/seconnecter.php";}     ?>
                <li class="drop"><a href="<?php echo $lien ?>" class="drop">Fr</a></li>
            </ul>
          </div>
        </li>
          
          <li id="li_nav research" class="search_bar">
              <form id="form-search" action="?">
                  <input type="text" id="search" name="search" placeholder="Your research"> 
                  <i class="material-icons" id="bt-search"><img src="../images/navbar/loupe.png" id="loupe" alt="ouvrir"/></i>
                  <i class="material-icons" id="bt-close"><img src="../images/navbar/croix.png" id="croix" alt="fermer"></i>
              </form>
          </li>
                            
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

<script async>
    function setSearch(oEvent){
                                  console.log(oEvent); 
                                  oEvent.preventDefault();
                                  var sType = oEvent.type,
                                      sClass =  "search",
                                      oSearch = oEvent.currentTarget,
                                      oForm  =  oSearch.form; 
                                  if((sType == 'focus' || sType == 'click') && !oForm.classList.contains(sClass)){
                                    oForm.classList.add(sClass)
                                  }else if(sType == 'blur' && oSearch.value.trim() == ''){
                                    oForm.classList.remove(sClass)
                                  }
                                     document.body.style.background = "white";
                                }
                                //Quand le DOm est dispo
                                document.addEventListener('DOMContentLoaded',function(){
                                  var oInput = document.forms["form-search"]["search"];
                                  oInput.addEventListener('focus',setSearch)
                                  oInput.addEventListener('blur',setSearch);

                                  document.getElementById("bt-search").addEventListener('click', function(oEvent){
                                    oEvent.preventDefault();oInput.focus() ;
                                  });

                                  document.getElementById("bt-close").addEventListener('click', function(oEvent){
                                    oEvent.preventDefault();
                                    oInput.form.classList.remove("search");
                                    oInput.value ='';
                                    document.body.style.background = "white";
                                  });
                                });
    
        window.onscroll = function() {scrollFunction()};
        document.getElementById("logo").style.height='100%';
        document.getElementById("logo").style.width='100%';
    function scrollFunction() {

          if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
              var nav = document.getElementsByClassName('nav_style');
              for (var i=0; i< nav.length; i++) {
                  nav[i].classList.add('nav_style_shrink');
                  nav[i].classList.remove('nav_style');
              }
              var logo = document.getElementsByClassName('navbar-header');
              for (var i=0; i< logo.length; i++) {
                  logo[i].classList.add('navbar-header_shrink');
              }
              document.getElementById("menu_nav").style.marginTop = "0.4%";
              var fleche_list = document.getElementsByClassName('fleche_abs');
              for (var i=0; i< fleche_list.length; i++) {
                  fleche_list[i].classList.add('fleche');
                  fleche_list[i].classList.remove('fleche_abs');
              }
          } else {
              var nav = document.getElementsByClassName('nav_style_shrink');
              for (var i=0; i< nav.length; i++) {
                  nav[i].classList.add('nav_style');
                  nav[i].classList.remove('nav_style_shrink');
              }
              var logo = document.getElementsByClassName('navbar-header_shrink');
              for (var i=0; i< logo.length; i++) {
                  logo[i].classList.remove('navbar-header_shrink');
              }
              document.getElementById("menu_nav").style.marginTop = "0.7%";
              var fleche_list = document.getElementsByClassName('fleche');
              for (var i=0; i< fleche_list.length; i++) {
                  fleche_list[i].classList.add('fleche_abs');
                  fleche_list[i].classList.remove('fleche');
              }
          } 
        }
</script>

CSS

/********************** Recherche qui s'agrandit ******************/
.search_bar {
    margin-top: 12px;    
}

#form-search{
    box-sizing : border-box;
    padding: 5px;  
    /* Pour éviter de faire apparaître le rectangle quand on clique sur le champ de recherche */
    width: 25px; 
    height: 25px;
    background: white;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 0; 
    -moz-transition: width .5s, border-radius .5s;
    -o-transition: width .5s, border-radius .5s ;
    -ms-transition: width .5s, border-radius .5s;
    -webkit-transition: width .5s, border-radius .5s;
    transition: width .5s, border-radius .5s;
}

#search {
    box-sizing : border-box;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 0px;
    height:20px;
    margin:0; 
    padding:0; 
    background: white;
    border:none;

    -moz-transition: width .5s;
    -o-transition: width .5s;
    -ms-transition: width .5s;
    -webkit-transition: width .5s;
    transition: width 0.5s;
}

#form-search.search {
    width: 150px; 
    justify-content:space-between;
    border-radius: 40px; 
}

#form-search.search #search{
    width: 100%;
    margin-left:8px;
    padding:3px;
}
#form-search.search #bt-close{
    display:inline-block
}

#bt-close,
#form-search.search #bt-search{
    display:none
}

#bt-close,
#bt-search{ 
    cursor:pointer;
}

#loupe, #croix {
    width: 18px;
    padding-top: 8px;
}

/************************************************************/

@font-face {
 font-family: "Corbel";
 src: url(../fonts/Corbel.ttf);
}

* {
    font-family: 'Corbel';
}

/* USING BOOTSTRAP 3.0.3 */
nav .navbar-toggle {
    margin: 13px 15px 13px 0;
}

nav .a {
    font-size: 18px;
    padding-bottom: 20px !important;
    padding-top: 20px !important;
    transition: all 0.3s ease;
}

#nav_style {
    background-color: white;
    border-top: 10px solid #0065B5;
    border-bottom: 10px solid #0065B5;
}

.nav_style {
    background-color: white;
    transition: all 0.3s ease;
    font-size: 20px;
    font-family: arial narrow;
    font-variant: small-caps;
    font-stretch: expanded;
    padding: 5px 5px;
}

#logo {
    transition: all 0.3s ease;
}

.logo_nav {
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
}

#menu_nav {
    position: relative;
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
}

#li_nav{
    color: darkgray;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    }

.navbar-header {
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
}

/**************************************************************************/
/******************************* Grand écran ******************************/


@media screen and (min-width: 992px) {
    #menu_nav {
        margin-left: 5%;
        margin-top: 0.7%;
    }
    
    .navbar-header {
        width: 20%;
    }
    
    #logo {        
        padding: 0px 0px;
    }
    
    .drop {
        font-size: 18px;
        list-style: none;
        color: gray;
        transition: all 0.5s ease 0s;
        -webkit-transition: all 0.5s ease 0s;
       -moz-transition: all 0.5s ease 0s;
        width: 150px;
    }
    
    .drop:hover {
        color: black;
        text-decoration: none;
    }
    
     /*** Lien ***/
    .currentLink {
        border-left: 4px solid #FFCE42;        
        border-bottom: 4px solid white;
    }
    
    .currentLangage {
        font-weight: bold;
    }
    
    
    /*** Shrink ***/
    .nav_style_shrink {
        background-color: white;
        transition: all 0.3s ease;
        font-size: 18px;
        font-family: arial narrow;
        font-variant: small-caps;
        font-stretch: expanded;
        padding: 2px 2px;
    }
    
    .navbar-header_shrink {
        width: 15%;
    }
    
    .navbar-header_shrink ul {
        margin: 0.3%;
    }
}

@media screen and (min-width: 993px) and (max-width: 1370px) {
    #nav_style {
        font-size: 15px;
    }
    
    .drop {
        font-size: 13px;
    }
    
}

/**************************************************************************/
/******************************* Demi écran *******************************/

@media screen and (min-width: 892px) and (max-width: 992px) {
    #nav_style{
        font-size: 18px;
    }
    
    #logo {
        width: auto;
        height: auto;
    }
    
    .drop {
        font-size: 15px;
        list-style: none;
        color: gray;
        width: 120px;
    }
    
    .navbar-header {
        width: 20%;
        margin-top: 0.5%;
    }
    
    .logo_nav {
        width: 90%;
        height: 90%;
    }
    
    #menu_nav {
        margin-top: 2%;
        display: flex;
        flex-wrap: wrap;
    }
    
    .nav_style_shrink {
        background-color: white;
        transition: all 0.3s ease;
        font-size: 15px;
        font-family: arial narrow;
        font-variant: small-caps;
        font-stretch: expanded;
        padding: 2px 2px;
    }
    
    .currentLink {
        border-left: 2px solid yellow;
    }
}

/**************************************************************************/
/*********************** Moyen et grand écran *****************************/

@media (min-width: 479px) {
    
    #croix, #loupe {
        margin-top: -10px;
    }
    
    .navbar-header_shrink {
        height: auto;
        transition: all .8s ease;
        -webkit-transition: all .8s ease;
        -moz-transition: all .8s ease;
        margin-top: 0.3%;
    }
    
    .logo_nav {
        width: 100%;
    }
    
    #li_nav:hover {
        color: black;
    }
}

/**************************************************************************/
/******************************* Moyen écran *****************************/

@media (max-width: 892px) and (min-width: 479px) {
    .nav_style, .nav_style_shrink {
        background-color: white;
        transition: all 0.3s ease;
        font-size: 23px;
        font-family: arial narrow;
        font-variant: small-caps;
        font-stretch: expanded;
        padding: 5px 5px;
        
    }
        
    .navbar-header, .navbar-header_shrink {
        transition: all .8s ease;
        -webkit-transition: all .8s ease;
        -moz-transition: all .8s ease;
    }
    
    .logo_nav {
        width: 50%;
    }
    
    /*** Lien ***/
    .currentLink {
        font-weight: bold;
        color: black;
        font-style: italic;
    }
    
        
    #nav_style {
        background-color: white;
        border-top: 5px solid #0065B5;
        border-bottom: 5px solid #0065B5;
    }
}

@media (min-width: 768px) and (max-width: 892px) {
    #nav_style {
        font-size: 17px;
    }
    
    .navbar-header, .navbar-header_shrink { 
        float: right;
        width: 70%;
        margin-top: 1%;
        transition: all .8s ease;
        -webkit-transition: all .8s ease;
        -moz-transition: all .8s ease;
        font-variant: small-caps;
        font-stretch: expanded;
    }
}

/**************************************************************************/
/******************************* Petit écran *****************************/

@media (max-width: 479px) {    
    #burger {
        background-color: gray;
    }
    
    #toggle_burger {
        border: 1px solid lightgray;
    }
    
    .search_bar {
        margin-left: 10px;
    }
    
    
    .nav_style, .nav_style_shrink {
        background-color: white;
        transition: all 0.3s ease;
        font-size: 23px;
        font-family: arial narrow;
        font-variant: small-caps;
        font-stretch: expanded;
        padding: 5px 5px;
        
    }
        
    .navbar-header, .navbar-header_shrink {
        transition: all .8s ease;
        -webkit-transition: all .8s ease;
        -moz-transition: all .8s ease;
    }
    
    .logo_nav {
        width: 50%;
        margin-top: 10px;
    }
    
    /*** Lien ***/
    .currentLink {
        font-weight: bold;
        color: black;
        font-style: italic;
    }
    
        
    #nav_style {
        background-color: white;
        border-top: 3px solid #0065B5;
        border-bottom: 3px solid #0065B5;
    }

}

Navbar breakpoint

Supprimer

Modérer

Signaler le message aux modérateurs