Discussion :

[Nicolas Legrand]

Bonjour à vous, je rencontre un blocage sur le responsive de mon menu, je souhaiterai qu'une fois que ma page se réduise à environ 1015 px de large (width),
mes liens s'inscrire et connexion se rapproche de mon lien contact avant de faire une burger menu. A partir de 1015px, les lien en question(s'inscrire et connexion restent statique) je chercher depuis trois jours mais je ne trouve toujours pas la solution si il y a quelqu'un qui peut m'apporter son aide merci d'avance.

Voici mon code HTML

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
 <header>
        <div class="container">
            <div class="div_test">
                 <h1><a href=""><img src="img/logo.svg" alt="logo" width='157' height="36" ></a></h1>       
            </div>
 
            <nav> <!-- container des ul -->
                <ul class="item_un">
                    <li><a href=""><i class="fa fa-home fa-lg"></i>Accueil</a> </li>
                    <li><a href=""><i class="fa fa-camera-retro fa-sm"></i>Galerie</a></li>
                    <li><a href=""><i class="fa fa-film fa-sm"></i>Vidéo</a></li>
                    <li><a href=""><i class="fa fa-id-card fa-sm"></i>Contact</a></li>
                </ul>
                <ul class="item_deux">
                    <li ><a class="inscription" href="">S'inscrire</a></li>
                    <li><a class="connexion" href="">Connexion</a></li>
                </ul>
            </nav> 
        </div>
    </header>  
    <section>
        <article>
            salut
        </article>
    </section>

et voici mon code Css

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
 body {
    background-color: rgb(223, 222, 222);
    margin: 0px;
    padding: 0px;
  } 
 
 
header{
background-color: rgb(255, 255, 255);
 
}
 
.container{
  display: flex;
  width:1000px;
  margin:auto;
}
 
 /*ITEM 1 h1 a img*/
h1{
  display: inline-block;
}
 
 /* ITEM 2 navigation générale*/
  /* container des items  ul */
nav{
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
 
  /* UL  menu (Accueil Galerie Video contact) */
  /* flex sur les li*/
  .item_un{
    display: flex;
    padding: 10px;
    margin-left: 40px;
  }
 
  .item_un a{
    text-decoration: none;
    color:rgb(83, 83, 83);
  }
 
  /* UL liens S'inscrire et connexion*/
  /* flex sur les li*/
  .item_deux{
    display: flex;
    padding: 10px;
  }
 
  .item_deux a{
    text-decoration: none;
  }
 
 
  li{
    list-style: none;
    padding: 8px;
  }
 
  a{
    font-size: 1.2em;
  }
 
  .inscription{
    border: 1px solid #abc738;
    padding: 8px 12px 8px 12px;
    color:   #abc738;
  }
 
  .connexion{
    background-color:  #abc738;
    padding: 8px 12px 8px 12px;
    color: white;
  }
 
section{
  background-color: blue;
  width: 1000px;
  height: 1500px;
  margin:auto;
}

[mathieu]

avant de vous occuper du menu, je pense qu'il faut commencer par l'effet responsif du corps de la page.
j'ai testé en ajoutant ce code suivant à la fin du css, est ce que c'est le résultat que vous cherchez à obtenir ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
@media (max-width : 1000px)
{
 
	  .container
	, section
	{
		width : 80%;
	}
 
 
}

vous pouvez tester le tout ici :
https://codesandbox.io/s/snowy-dawn-...src/styles.css

[Nicolas Legrand]

Bonjour, merci pour votre réponse, non ce n'était pas l'effet que je souhaitais réaliser, mais j'ai trouvé une solution je n'ai pas eu le temps de la poster.
Voici ce que je souhaitais faire tout simplement:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
 @media all and  (max-width: 1002px)
 {
 
      .container{
        width:auto; 
      }
 
      section{
        width:auto; 
      }
}

C'est tout bête mais je me rappelais plus comment faire. Bon week end.