Une barre des menus fixe
Rédigé par jack le 7 commentairese
.nav {
background-color: #fff;
height: 4rem;
text-align: left;
margin-top: 1rem;
}
.nav {
background-color: #fbfbfb;
height: 4rem;
text-align: center;
padding-top: 0.5rem;
position: fixed;
width: 100%;
z-index: 1;
border-bottom: 1px #eee solid;
}
DClassé dans : PluXml, Thème ,Mots clés : Astuce, Css, Menu, Navigation, PluCSS, PluXml, Thème, Template
A propos de l'auteur, jack:
Webmestre de PluXopolis de 2018 à Avril 2023.
7 commentaires
Pierre Aribaut a dit : #3
Hello Bazooka et Stéphane, je viens de voir la démonstration sur ton site Bazooka, sympa ton menu collé en haut avec des sous-menus, bien fait, pratique. Au passage, j'ai vu un détail sur ton blog, tes articles et catégories n'ont pas de numéros, juste article/titre et categorie/titre, c'est dans un des plugins que tu proposes ou un des plugins proposés par Stéphane ? Si non, c'est pas grave, c'était plus de la curiosité qu'autre chose, je me demandais comment tu avais fait ça.
bazooka07 a dit : #5
Non c'est encore une version 5.5 de PluXml que j'avais modifié. Il faut que refasse la modif sur la version 5.6. Mais c'est assez long à faire.
laucoba a dit : #6
Merci pour l'astuce
Par contre ça fonctionne bien sur Firefox mais pas sur Chrome :(
tuxmika a dit : #7
Bonjour
comment fait t'on pour afficher la barre de menu sous le header ?
rFil RSS des commentaires de cet article
Les commentaires sont fermés.
bazooka07 a dit : #1
Bonjour,
Dans la version 5.5 de PLuXml, la barre de menu est située en dessous du bandeau. Avec cette modif., cette barre sera directement plaquée sur le bandeau le masquant en partie.
Pour remédier à cela, il est préférable de remplacer "position: fixed" par "position: sticky; top: 0". Ainsi quand la page défilera, le menu viendra "se coller" au haut de la fenêtre sans masquer le bandeau. De plus, cela introduit un certain dynamisme la page, ce qui n'est pas désagréable.
Une démonstration est visible sur mon site.
Cordialement.