Top menu : répartir les blocs catégories sur toute la largeur du menu

[graminou]

Bonjour à toutes et à tous !

 

Tout est dans le titre. J’utilise Prestashop 1.6 avec le thème par défaut.

 

Pb rencontré (voir PJ) : les blocs catégorie du menu supérieur sont serrés sur la gauche. il reste donc de la place grise à droite des derniers blocs de la ligne de menu.

 

J'aimerais que ces blocs soient harmonieusement répartis pour qu'ils occupent toute la place disponible.

 

Any idea ? Je suis bien évidemment prêt à mettre les mains dans le camboui, s'il le faut

 

Merci d'avance pour votre aide !

JMarc

[loulou66]

Coucou

 

Bonjour madame irma   je vois, je vois, je vois!!!

ha bin non je vois rien ya pas de screen ni d'url du site 

 

@++

Loulou66

[Fab20620]

Dans le fichier superfish-modified.css de ton theme (boutique/theme/nomdutheme/css/module/blocktopmenu/superfish-modified.css) à partir de la ligne 60 il faut modifier la deuxième valeur du padding. Plus tu vas l'augmenter, plus tes catégories vont s'élargir occupant ainsi toute la largeur du menu.

[Klemart3D]

Sinon t'as la propriété CSS3 Flexbox (syntaxe : "display : flex") qui permet de gérer l'espacement "automatiquement".

 

Un bon tuto qui en explique son utilisation :

 

http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

 

Mais niveau compatibilité, c'est pas top sur les anciens IE (<10)

 

http://caniuse.com/#search=flexbox

[graminou]

@Loulou66 : Au temps pour moi ! Ca se passe ICI.

J'utilise PS1.6 et default-bootstrap 1.0

 

@Fab20620 : yes mister, ça fonctionne pour une ligne, mais mon menu s'étale sur deux. Donc c'est mort, mais je retiens le truc : merci !

 

@Klemart3D : merci pour ce truc, que je garde aussi en mémoire... mais bon, les trucs incompatibles avec des explorer anciens, je tâche d'éviter.

 

Remettons les mains dans le cambouis. Tout mes soucis proviennent du fait que le menu revient à la ligne :

 

- étaler les blocks sur leur ligne en adaptant automatiquement leur largeur ?

- menu sous-catégories déroulant en partant de la séparation des deux lignes, ce qui fait que j'ai les sous menus de la ligne inférieure qui la cachent... pas pratique.

 

Là je sèche méchamment... Any idée ?

En tous les cas, merci pour vos réponses !

[loulou66]

Coucou

 

il faut jouer avec le taille de la font et le padding des <li> pour avoir le menu sur un ligne

dans theme/bottstrap_default/css/blocktopmenu/blocktopmenu.css ligne 60

remplaces
.sf-menu > li > a {
font: 600 18px/22px "Open Sans", sans-serif;
text-transform: uppercase;
color: #484848;
display: block;
padding: 20px 20px;
border-bottom: 3px solid #E9E9E9;
}
par
.sf-menu > li > a {
font: 600 11px/14px "Open Sans", sans-serif;
text-transform: uppercase;
color: #484848;
display: block;
padding: 15px 5px;
border-bottom: 3px solid #E9E9E9;
}

@++

Loulou66

[2FR3]

Coucou

 

il faut jouer avec le taille de la font et le padding des <li> pour avoir le menu sur un ligne

dans theme/bottstrap_default/css/blocktopmenu/blocktopmenu.css ligne 60

remplaces
.sf-menu > li > a {
font: 600 18px/22px "Open Sans", sans-serif;
text-transform: uppercase;
color: #484848;
display: block;
padding: 20px 20px;
border-bottom: 3px solid #E9E9E9;
}
par
.sf-menu > li > a {
font: 600 11px/14px "Open Sans", sans-serif;
text-transform: uppercase;
color: #484848;
display: block;
padding: 15px 5px;
border-bottom: 3px solid #E9E9E9;
}

@++

Loulou66

Et sur la taille des font aussi