Pluxopolis

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

Une barre des menus fixe

Rédigé par Stéphane 2 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.

2 commentaires

#1  - bazooka07 a dit :

Bonjour,
Dans la version 5.6 de Pluxml, la barre de menu est située tout en haut de la page. Et avec cette modif., cette barre restera "coincée" en haut de la fenêtre pendant le défilement de la page.

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

Fil RSS des commentaires de cet article

Écrire un commentaire

Quelle est la première lettre du mot rqjnve ?
Top