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

Développeur Web autodidacte HTML5/CSS3/JS + C# (ASP.NET Core) / Python (Django)

Laurent Cipicchia

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

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