Discussion :

[laurentSc]

Bonjour,

je souhaite fixer le menu lors d'un scrolling. J'ai tenté le CSS position:sticky; mais le menu continue de défiler...

J'ai fait 3 essais en vain...

1er essai :

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
<header>
...
<div class="divNav">
    <nav class="container-menu">
        <ul>
            <li><a href="accueil.php">Accueil</a></li>
            <li><a href="tarifs.php">Tarifs</a></li>
            <li><a href="les-nids-et-les-insectes.php">Les nids et les insectes</a></li>
            <li><a href="conseils.php">Conseils</a></li>
            <li><a href="nous-contacter.php">Nous contacter</a></li>
        </ul>
    </nav>
</div>
</header>

Code css :

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

1
2
3
header div nav{
    position:sticky;
}

2e essai : html idem et CSS :

Code css :

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

1
2
3
4
.container-menu{
    ...
    position:sticky;
}

3e essai :

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
<header>
...
<div class="divNav" style="position:sticky;">
    <nav class="container">
        <ul>
            <li><a href="accueil.php">Accueil</a></li>
            <li><a href="tarifs.php">Tarifs</a></li>
            <li><a href="les-nids-et-les-insectes.php">Les nids et les insectes</a></li>
            <li><a href="conseils.php">Conseils</a></li>
            <li><a href="nous-contacter.php">Nous contacter</a></li>
        </ul>
    </nav>
</div>
</header>

Pour les 2 premiers, l'inspecteur ne voit pas la règle CSS. Exemple pour le 2e :

Code css :

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

1
2
3
.divNav {
	background-color: #998F85;
}

Pour le 3e, il la voit bien :

Code css :

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

1
2
3
élément {
	position: sticky;
}

mais le menu continue de défiler si on scrolle. Comment faire SVP ?

[NoSmoking]

Bonjour,
je ne vois pas de position « d'arrêt » !

Code :

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

1
2
3
4
header div nav{
    position:sticky;
    top: 0;           /*-- position d'arrêt verticale --*/
}

[laurentSc]

Merci pour ta réponse. Je ne connais pas le fonctionnement de sticky. Néanmoins, même en rajoutant cette ligne, le menu continue de défiler si on scrolle...

J'ai même essayé un peu partout...

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
.divNav {
    background-color: #998F85;
    position:sticky;
    top: 0;           /*-- position d'arrêt verticale --*/
}
 
.container-menu{
    position:sticky;
    top: 0;           /*-- position d'arrêt verticale --*/
}
 
header div nav{
    position:sticky;
    top: 0;           /*-- position d'arrêt verticale --*/
}

[NoSmoking]

J'ai même essayé un peu partout...

sauf sur le <header> car c'est lui qui contient ton menu et qui scrolle par rapport au document.

Code :

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

1
2
3
4
header {
    position:sticky;
    top: 0;           /*-- position d'arrêt verticale --*/
}

[laurentSc]

Oui, ça fonctionne sauf que ça en fige trop car l'image d'en-tête est aussi dans le header :

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
<header>
<div class="divNav">
    <nav class="container-menu">
        <ul>
            <li><a href="accueil.php">Accueil</a></li>
            <li><a href="tarifs.php">Tarifs</a></li>
            <li><a href="les-nids-et-les-insectes.php">Les nids et les insectes</a></li>
            <li><a href="conseils.php">Conseils</a></li>
            <li><a href="nous-contacter.php">Nous contacter</a></li>
        </ul>
    </nav>
</div>
<div class="entete">
    <div class="fondBlanc">
        <div class="titre container">
            <h1>Pas d'Panique</h1>
            <p>Désinsectisation de nids de guêpes et de frelons</p>
        </div>
    </div>
</div>
</header>

avec

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
.entete {
    height: 25rem;
    background-image: url("../images/imageEntete-min.webp");
    background-position: center;
    background-size: cover;
    margin: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
 
}

Mais je ne parviens pas à cibler uniquement le menu. Ta proposition du post #2 semblait convenir mais non. Vois tu comment faire ?

[NoSmoking]

Change la structure de ta page comme suit :

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
<nav class="container-menu">
  <ul>
    <li><a href="accueil.php">Accueil</a></li>
    <li><a href="tarifs.php">Tarifs</a></li>
    <li><a href="les-nids-et-les-insectes.php">Les nids et les insectes</a></li>
    <li><a href="conseils.php">Conseils</a></li>
    <li><a href="nous-contacter.php">Nous contacter</a></li>
  </ul>
</nav>
<header class="entete">
  <div class="fondBlanc">  <!-- à quoi sert-elle ? -->
    <div class="titre container">
      <h1>Pas d'Panique</h1>
      <p>Désinsectisation de nids de guêpes et de frelons</p>
    </div>
  </div>
</header>

il te faudra sûrement revoir les propriétés des différentes classes mais le principe est de sortir la navigation du <header>, je te rassures c'est conforme !

PS : envoi un peu rapide !

Il faut mettre :

Code :

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

1
2
3
4
5
6
nav {
  z-index: 1;
  position: sticky;
  top: 0;
  background: #FFF;  /*-- ou autre opacité --*/
}

[laurentSc]

Bonsoir,

je mets un certain temps à répondre, mais bon...je réponds.

<div class="fondBlanc"> <!-- à quoi sert-elle ? -->

Code css :

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

1
2
3
4
5
6
7
8
9
.fondBlanc {
    height: 12rem;
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8752263600752801) 0%, rgba(255, 255, 255, 0.864021878282563) 49%, rgba(255, 255, 255, 0) 100%);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

Ensuite, ton menu était vertical ; j'ai ajouté du CSS pour le rendre horizontal :

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
#menu2 {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#menu2 li {
    display: block;
    position: relative;
    float: left;
}
li #menu2 {
    display: none;
}
#menu2 li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #1e7c9a;
    margin-left: 1px;
    white-space: nowrap;
}
#menu2 li a:hover {
    background: #3b3b3b;
}
li:hover #menu2 {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
    background: #1e7c9a;
}

Ce CSS, je ne le maîtrise pas ; je l'ai récupéré.

j'ai du changé le nom d'un id :

Code html :

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

1
2
3
4
5
6
7
8
9
       <nav class="container-menu">
        <ul id="menu2">
            <li><a href="accueil.php">Accueil</a></li>
            <li><a href="tarifs.php">Tarifs</a></li>
            <li><a href="les-nids-et-les-insectes.php">Les nids et les insectes</a></li>
            <li><a href="conseils.php">Conseils</a></li>
            <li><a href="nous-contacter.php">Nous contacter</a></li>
        </ul>
       </nav>

Enfin, pour que le header occupe une ligne entière et ne soit pas collé à droite du menu, j'ai rajouté la règle width: 100%; à la classe entete et c'est tout bon