Header et nav avec logo en flexbox

Bonjour,

je souhaiterais avoir un header avec une nav et un logo comme sur le site (voir le lien ci-dessous), en flexbox.

Lien : https://loiscuby.fr/#portfolio

Merci d'avance.
Modifié par Richard92 (24 Mar 2020 - 12:23)

Hello,
Très bon exemple, ce header est justement construit avec Flexbox. Prends exemple dessus et fais nous un petit update avec du code si tu bloques sur quelque chose

ok voici le code.

<ul class="navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Products</a></li>
</ul>

<div id="headerImage">
  <div id="box">
      <h2>INC</h2>
    <h3>Développeur Front End Junior</h3>
  </div>
</div>

.navigation {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  
  list-style: none;
  margin: 0; 
  background: #fff;
  border-top: 4px solid green;
}

.navigation a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: #333;
}

ul.navigation {
  padding-right: 200px;
}

#headerImage {
  background-image: url("/assets/img/header.jpg");
  height: 450px;
  justify-content: stretch;
}

#box {
  color: white;
  text-align: center;
  margin-left: 700px;
  border: 2px solid white;
  width: 200px;
}

@media all and (max-width: 800px) {
  .navigation {
    justify-content: space-around;
  }
}

@media all and (max-width: 600px) {
  .navigation {
    flex-flow: column wrap;
    padding: 0;
  }
  .navigation a { 
    text-align: center; 
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255,0.3); 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
  }
  .navigation li:last-of-type a {
    border-bottom: none;
  }
}

Hello,
Le mieux serait d'emballer ton html actuel dans un autre élément qui lui même serait un flexbox. Si tu lui donnes la class wrapper (<div class="wrapper">…</div>) et que tu lui appliques ceci, cela devrait le faire

.wrapper{
  display: flex;
  justify-content: space-between;
}