Affichage du menu responsive

**labarre2002** · 29/03/2023, 14h37

Bonjour

je suis confronte a un soucis d affichage de mon menu en
appliquant les media queries
sur ma première page il s'affiche comme suit:

Nom : 1.jpg
Affichages : 152
Taille : 28,2 Ko

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
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
<body>
 
    <nav class="menu">
        <a href="#">Accueil</a>
        <a href="burger.html">Burger</a> 
        <a href="sandwich.html">Sandwich</a> 
        <a href="chawarma.html">Chawarma</a> 
       <a href="salades.html">Salades</a> 
        <a href="bbq.html">BBQ</a> 
        <a href="boissons.html">Boissons</a> 
 
       </nav>    
 
 
 
   <main>
 
             <div class="container" >
 
                       <div class="title">
                             <div class="title1">
                                <h2 class="s0">
                                    chez
                                    <span class="first-line">
                                        med      
                                    </span>
 
 
                              </h2>
                             </div>
 
                        </div>
 
 
                            <figure  class="logo">
                                <img src="images/logoB.png" alt="Logo">
                                   <figcaption>
                                   <span> Découvrer des Saveurs exquises</span> 
                                   </figcaption>
                            </figure>
 
 
 
 
                        <div class="pictures">
                            <img src="images/burger.jpg" alt="Hamburger">
                        </div>
 
 
 
 
 
             </div>
 
 
 
 
 
 
 
 
 
 
 
   </main>
   <footer>
    <p>&copy;*Copyright*****Chez MED***2023</p> 
    <p><img src="images/loc.png"  class="localisation" alt="Adresse">2152 ** Boulevard des ULYSSES</p>
    </footer>
 
</body>

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
    .menu {
display:flex;
flex-wrap: wrap;
}
 
 
 
.menu a{
    flex:1;
    color: black;
}
 
 
 a:link {
    text-decoration: none;
    color: black;
   }
 
  .menu a:hover {
    background-color: #f3ebe0;
  }
 
 
 
.menu a{
 
    text-align: center;
    padding: 7px 0 7px 0;
   }
 
  @media(max-width:600px){
 
    .menu{
       flex-direction: column; 
    }
 
    .container{
        grid-template-columns: 1fr;
        grid-template-areas: "logos"
                            "titre"
                             "image";
 
 
    }
 
}

en revanche sur la deuxieme page mon menu d'affiche de la
sorte:

Nom : 2.jpg
Affichages : 126
Taille : 15,4 Ko

code source de la seconde page:

Code html :

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

1
2
3
4
5
6
7
8
9
10
 <nav class="menu">
        <a href="resto.html">Accueil</a>
        <a href="burger.html">Burger</a> 
        <a href="sandwich.html">Sandwich</a> 
        <a href="chawarma.html">Chawarma</a> 
       <a href="salades.html">Salades</a> 
        <a href="bbq.html">BBQ</a> 
        <a href="boissons.html">Boissons</a> 
 
       </nav>

code CSS de la seconde page:

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
.menu {
 
        display:flex;
        flex-wrap: wrap;
       flex-direction: row;
 
        }
 
        .menu a{
            flex:1;
            color: black;
        }
 
 
         a:link {
            text-decoration: none;
            color: black;
           }
 
          .menu a:hover {
            background-color: #f3ebe0;
          }
 
 
 
        .menu a{
            width:14.28%;
            text-align: center;
            padding: 7px 0 7px 0;
 
        }
 
        @media(max-width:600px){
 
        .menu{
           flex-direction:column; 
        }
 
        .central0{
            grid-template-columns: 1fr;
            }
 
    }