1448 sujets

Web Mobile et responsive web design

Bonjour,
Je travaille avec Bootstrap version 3.
Je termine un site https://wh4.uclouvain.be/energie-plus/index.php?id=2# et j'ai un problème de scroll avec un menu déroulant sur petits écrans. Mon menu principal se transforme en bouton avec menu déroulant :
<button class="navbar-toggle" data-target="#barre_navigation" data-toggle="collapse" type="button" aria-expanded="true">
<span class="sr-only">Basculer la navigation</span>
<p>Menu</p>
</button>
<div id="barre_navigation" class="navbar-collapse collapse in" aria-expanded="true" style="">
<ul class="nav navbar-nav">
<li>
...
</ul>

J'ai configuré mon menu déroulant comme ceci
.navbar-default {
  height: 0;
}
 
.collapse navbar-collapse li img {
     float: right;
     margin-right:0%;
  }
  
  .nav {
    height:  100%;
  }
  
#barre_navigation .navbar-nav {
    background-color: rgba(255, 255, 255, 0.9) !important;
    margin-top: 15px;
  }
  
#barre_navigation {
    margin-left: 0%;
    width: 100%;
    max-height: 800px !important;
    overflow-y: scroll !important;
}  

  #barre_navigation ul {
   display: block;
}

C'est à dire en mettant une max-height: 800px à ma #barre_navigation pour que l'on puisse voir, quand l'écran le permet tout le menu. Le problème est quand je me trouve sur un écran dont la hauteur ne permet pas de voir tout l'écran, il ne m'ajoute pas de scroll.

J'ai le scroll si je raccourci la hauteur de ce menu et la mets à 500px par exemple mais ça ne m'arrange pas car je raccourci le menu et rend une partie invisible (avec scroll) même quand l'écran est assez haut.
Merci d'avance pour votre aide. upload/1485962138-32832-ecran02.png
Salut,
J'ai visité le site et avant de voir de voir ta question, j'ai été surpris de voir ce message : "Pour une meilleure lecture, veillez à effacer la mémoire cache de votre navigateur à la première consultation de cette nouvelle version d'Energie+ !"
Pourquoi et dans quel but ? Car ça fait pas terrible Smiley ohwell et en plus la plupart des visiteurs ne savent pas comment procéder...

Si c'est pour recharger les assets (css et js), il y a une solution pour invalider les caches de manière simple : tu ajoute un argument après le nom de ton fichier. Par exemple style.css?v=1.0.0