Vous utilisez un navigateur obsolète, veuillez le mettre à jour.
Veuillez utiliser un navigateur internet moderne avec JavaScript activé pour naviguer sur OpenClassrooms.com
Une question ? Pas de panique, on va vous aider !
Ce sujet est fermé.
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 & 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; } }