placer les deux dernier lien de mon menu en bas

Warteg
Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.
Je voudrais tous simplement mettre mes deux dernier lien en dessous des autres qui eux sont aligner en dessous du logo quand la largeur arrive a 360px , et çi vous pouvez me conseiller car je débute merci

Ce que je fais

réduire la taille de mon menu pour soit qu'il s'adapte ou déplacer les deux dernier lien ( icone twitter et facebook en bas du menu aligner au centre

Html 

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Warteg941</title>
</head>
<body>
   <header>
       <div class="navbar-element">
            <a href="index.html" class="link-logo"><img src="img/1.png" alt="logo" class="logo"></a>
       </div>
       <div class="menu">
           <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Players</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">shop</a></li>
                <li><a href="#"><img src="img/Twitter-logo.png" alt="bouton-twitter"></a></li>
                <li><a href="#"><img src="img/Facebook-logo.png" alt="bouton-facebook"></a></li>
           </ul>
       </div>
   </header> 
</body>
</html>

CSS

/********* STRUCTURE *********/
body {
  margin: 0;
  width: 100%;
}

/********* HEADER *********/
.navbar-element{
  text-align: center;
}

.link-logo {

}

.logo {
  width: 20%;
  height: 20%;
  position: relative;
}

/********* MENU *********/
.menu {
  text-align: center;
  width: 100%
}

.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  width: 100%;
}

.nav li {
  display: inline;
}

.nav a {
  display: inline-block;
  color: #000;
  padding: 14px 16px;
  text-decoration: none;
}

Ce que je veux

je voudrais soit réussir a placer mes de lien ( ce sont des icones un twitter et l'autre facebook) en dessous des lien de mon menu ou rétrécir mon menu a partir de 360 px de largeur

Ce que j'obtiens

pouvoir adapter mon menu au écran

4 réponses

Balsakup

Salut,

Il faut que tu faces 2 menus séparés.

Alainpre

Puisque tu as déclaré tes items de menu en inline, pourquoi ne pas faire tout simplement un retour à la ligne avant les deux logos.

       <div class="menu">
           <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Players</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">shop</a></li>
                <br/>
                <li><a href="#"><img src="img/Twitter-logo.png" alt="bouton-twitter"></a></li>
                <li><a href="#"><img src="img/Facebook-logo.png" alt="bouton-facebook"></a></li>
           </ul>
       </div>
Lartak

Bonjour.
@Alainpre: Ta solution n'a aucun rapport avec ce qu'il demande :

Je voudrais tous simplement mettre mes deux dernier lien en dessous des autres qui eux sont aligner en dessous du logo quand la largeur arrive a 360px.

Donc une balise br ne fera pas la différence entre une largeur de 360px et une largeur supérieure.
De plus que ce n'est pas une solution que tu lui proposes, mais du bricolage, pour faire simple, ce n'est pas une bonne pratique.
C'est une solution avec du CSS qu'il a besoin et non avec du HTML.

jowz

Peut-être, faire une autre div pour les réseaux sociaux avec une classe 'social' par exemple. Et ensuite dans le css tu fais un text-align: center; pour la classe .social ?

<header>
       <div class="navbar-element">
            <a href="index.html" class="link-logo"><img src="img/1.png" alt="logo" class="logo"></a>
       </div>
       <div class="menu">
           <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Players</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">shop</a></li>
           </ul>
       </div>
       <div class="social">
           <a href="#"><img src="img/Twitter-logo.png" alt="bouton-twitter"></a>
           <a href="#"><img src="img/Facebook-logo.png" alt="bouton-facebook"></a>
       </div>
   </header> 

     .social {
      text-align: center;
  }

Attention, je débute aussi donc, prends ça avec des pincettes.