[Résolu] Problème barre de navigation dans mon template

Réponses

• bazooka07 PluXml Lead Developer, Moderator

  mars 2018

  Quelqu'un qui utilise Flexbox ! Quelle bonne idée.
  
  Tu trouveras la réponse avec ce lien :
  https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
  
  Si tu donnes un poisson à un homme, il mangera un jour. Si tu lui apprends à pêcher, il mangera toujours.
  Proverbe chinois ou africain selon les dires.

  Accès à mon dépôt de plugins et thèmes
  installe PluXml plus vite que ton ombre avec kzInstall2
• Gzyg Member

  mars 2018 mars 2018 modifié

  Salut,
  
  @ vince : commence par remplacer toutes les div inutiles de la barre de navigation par de vraies listes, ça sera plus simple et plus propre.
  
  @ bazooka07 : je crois que tu t'es réjouis un peu trop vite quant à l'utilisation de flexbox sur ce template...
  
  
  à plus,
  
  Gzyg
• bazooka07 PluXml Lead Developer, Moderator

  mars 2018 mars 2018 modifié

  @gzyg,
  

  [== CSS ==]
  .menubar {
    flex-wrap: wrap;
  }
  
  

  Testé sous Firefox, Chromium, Vivaldi, Opéra.
  Pas de Edge sous le coude.
  Reste les mobile.
  Mais d'après le site caniuse, pas de souci
  
  Reste les mobiles
  
  J'avoue ne pas avoir regardé avant le code source de la page. C'est vraiment la misère. Il ne devrait pas accepter cela chez Github.
  
  Pourtant il y a des bons tutos chez OpenClassroom:
  https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/structurer-sa-page

  Accès à mon dépôt de plugins et thèmes
  installe PluXml plus vite que ton ombre avec kzInstall2
• kowalsky Member

  mars 2018 mars 2018 modifié

  Sans vouloir ôter le poisson de la bouche de vince, je dirais bien :
  
  .menubar {
  flex-wrap: wrap;
  }
  
  
  Sinon, ya la méthode à l'ancienne (mais ça rend pas beau en l'état sur le sous-menu)
  
  .menubar {
  display: inline-block;
  }
  .menubar .menu-item {
  display: inline-block;
  }
  
  
  Édit : ah ben zut, même plus le temps de pêcher par ici, bazooka07 était déjà repassé par là... (au moins je m'étais pas planté)
• vinc[E] Member

  mars 2018

  @bazooka07 : Merci pour les liens et le code, ça marche nickel !
  
  J'ai aussi trouvé ce tuto en voulant approfondir un peu Flexbox :
  https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  
  Merci à tous pour votre aide.