Rendre un menu responsive
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:
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:
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;
} |
