[RÉSOLU] indentation sous-menu par rapport au menu parent

nicomax · mai 2017

Salutatous,

Sous PluXml 5.5,
avec à la fonction Groupe de l'admin, j'ai créé un menu comportant un sous-menu de pages.

Comment faire pour que le nom des pages composant le sous-menu, soit indenté (légèrement en retrait horizontal vers la droite) par rapport à son menu parent ? (que ce soit en affichage normal comme en affichage réduit)

Comme PluXml 5.5 est responsive, si je réduis la fenêtre du navigateur le menu se positionne en haut et affiche toutes les entrées sur le même alignement vertical ce qui fait qu'on s'y perd un peu !

Nico

kowalsky · mai 2017

salut nicomax,

pour avoir le décalage quelque soit le mode d'affichage, rajoute le code suivant dans theme.css avant la ligne /*

Header

*/

[== Indéfini ==]
.responsive-menu ul li ul li a {
padding-left: 1.7rem;
}

(la valeur du padding-left par défaut étant de 0.7rem, j'ai juste rajouté 1rem pour réaliser le décalage, cette valeur pouvant être modifiée si cela n'est pas suffisant à ton goût)

Pour un décalage uniquement en affichage mobile, le bout de code est alors à placer à la fin du bloc "@media (max-width: 767px)" en ligne 27 de theme.css

Cela devrait ressembler à ça :

[== CSS ==]
@media (max-width: 767px) {
	.nav {
		height: auto;
		max-height: 200px;
		overflow-y: auto;
		text-align: left;
		margin-top: 0;
	}
	.nav>.container {
		padding: 0;
	}
	.responsive-menu label {
		background-color: #fff;
		color: #333;
		font-size: 3.5rem;
		margin: .75rem;
		text-align: right;
	}
	.responsive-menu label:before {
		content: '\039e';
	}
	.responsive-menu ul li ul li a {
	padding-left: 1.7rem;
	}
}

nicomax · mai 2017

Ça fonctionne parfaitement :cool:
Merci Éric

[RÉSOLU] indentation sous-menu par rapport au menu parent

Réponses