Pluxopolis

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

Une barre des menus fixe

Rédigé par Stéphane 6 commentaires

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.

6 commentaires

#1  - bazooka07 a dit :

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.

Répondre
#2  - Stéphane a dit :

Merci pour ce conseil

Répondre
#3  - Pierre Aribaut a dit :

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.

Répondre
#4  - Stéphane a dit :

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

Répondre
#5  - bazooka07 a dit :

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.

Répondre
#6  - laucoba a dit :

Merci pour l'astuce

Par contre ça fonctionne bien sur Firefox mais pas sur Chrome :(

Répondre

Fil RSS des commentaires de cet article

Écrire un commentaire

Quelle est la deuxième lettre du mot qnsxwg ?
Top