Menu "sticky" continue de scroller

Version imprimable

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:

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:

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

2e essai : html idem et CSS :

Code:

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

3e essai :

Code:

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:

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

Pour le 3e, il la voit bien :

Code:

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

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

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

Code:

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

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:

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 --*/
}

02/02/2023, 12h11
NoSmoking
Citation:

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:

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

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

Code:

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:

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 ?

Change la structure de ta page comme suit :

Code:

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 : :oops: envoi un peu rapide !

Il faut mettre :

Code:

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

Bonsoir,

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

Citation:

Envoyé par NoSmoking

Code:

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:

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:

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 :D