Pluxopolis

Tout savoir pour devenir un pro de PluXml, mais pas seulement...

Une barre des menus fixe

Rédigé par jack le 7 commentairese

Pour remplacer la barre actuelle des menus dans le thème par défaut de PluXml 5.6 et la rendre fixe, éditez le fichier themes/defaut/css/theme.css et remplacer les lignes suivantes: 

.nav {
	background-color: #fff;
	height: 4rem;
	text-align: left;
	margin-top: 1rem;
}
par 

.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;
}
La barre sera ainsi fixe en haut de l'écran lors de l'utilistion du scroll vertical à la souris et les menus seront centrés.

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

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.

Stéphane a dit : #2

Merci pour ce conseil

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.

Stéphane a dit : #4

C'est le plugin de Bazooka qui supprime les n°

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.

Top