Partage
  • Partager sur Facebook
  • Partager sur Twitter

Barre de navigation fixe avec Flexbox

Utiliser la propriété position: fixed

    14 avril 2018 à 19:49:04

    Bonjour, je m'exerce avec la création du barre de navigation. J'aimerai qu'elle reste fixe, or, lorsque j'utilise la propriété "position: fixed;", la propriété "flex: 1;" n'est plus prise en compte (.navbar)  :

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8"/>
        <link href="design.css" rel="stylesheet" type="text/css"/>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
        <title>MyWebsite</title>
      </head>
    
      <body>
        <div class="container">
          <header>
    
          </header>
          <div class="navbar">
            <nav>
              <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="#">Presentation</a></li>
                <li><a href="#">Map</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </nav>
          </div>
          <div class="subcontainer">
            <article>
              <h1>Welcome on MyWebsite !</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
                velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
                id est laborum.
            </article>
          </div>
          <footer>
    
          </footer>
        </div>
      </body>
    </html>
    
    .container{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      font-family: 'Open-Sans', sans-serif;
    }
    
    .navbar{
      flex: 1;
      text-align: center;
      background-color: red; font-size: 20px; } .navbar ul{ display: inline-flex; flex-direction: row; list-style: none; } .navbar ul li{ padding-left: 22px; padding-right: 22px; } .navbar ul li a{ text-decoration: none; color: black; } .subcontainer{ margin-left: 180px; margin-right: 180px; }

    Cordialement


    • Partager sur Facebook
    • Partager sur Twitter
      15 avril 2018 à 11:08:51

      Il y a une erreur dans ton css le <br> n'a rien à faire là :-)

      Sinon c'est normal que le flex 1 n'agisse plus, car quand tu met une position fixed à quelque chose, il sort du flux, et dans ton cas il n'est dans plus contenu dans le .container et retombe en top: 0 left: 0.

      Il va falloir que tu lui donne une position.

      + d'infos: https://developer.mozilla.org/fr/docs/Web/CSS/position

      un début de css pour ton navbar :

      .navbar{
        text-align: center;
        background-color: red;
        font-size: 20px;
        position: fixed;
        top: 0;
        left: 180px;
      }



      Tu le place en fixed à 180px du bord gauche (comme ton .subcontainer) et à 0px du bord haut. A toi de régler sa taille maintenant :-) et rajoute du texte dans ton lorem pour faire tes tests ca sera plus pratique :-)

      -
      Edité par Laurent Cipicchia 15 avril 2018 à 11:24:52

      • Partager sur Facebook
      • Partager sur Twitter
      Donne moi ton avis sur ma Reconversion professionnel en Développeur Web ----- Rejoins moi sur LinkedIn

      Barre de navigation fixe avec Flexbox

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur
      • Markdown