Astuce : Centrer votre menu dans Prestashop 1.6

Voici un petit tuto qui va vous permettre de centrer votre menu dans prestashop

Cette astuce Prestashop est valable pour la version 1.6

Comment centrer le menu sur ma boutique Prestashop ? 

Il y a q’un seul fichier à modifier : superfish-modified.css  qui appartient au module blocktopmenu

1) Dans .sf-menu, ajouter text-align:center

2) Dans .sf-menu > li, remplacer float:left par display: inline-block;

Et voila le resultat :

Capture d’écran 2015-04-13 à 19.31.27

Articles similaires

 Gratuit : Template Mails | Astuce Prestashop 1.6
views 3694
 Je vous propose une nouvelle mise en page plus minimaliste pour les mails. Le fichier comprend la version anglaise et française. Vous pouvez télécharger les templates gratuitement. Cette astuce Prestashop est valable pour la version 1.6 et 1.5 1) Exemple de mails   A noter : - Il est possible de modifier le contenu des mails. Pour cela il faut aller dans Localisation > Traductio...
Ajouter des tabs dans une page cms | Astuce Prestashop 1.6
views 1462
 Ce tutorial va vous permettre d'insérer des tabs dans vos pages cms Astuce Prestashop 1.6 -------------------------------------- 1) Insérer une tab horizontal sur la page cms de Prestashop  1.1) Une fois sur la page cms, cliquez sur l'icône source code 1.2 Insérez le code suivant 1.3 Enregistrer et visualiser 1.4 Si vos tabs ne fonctionnent pas, il sera nécessaire d'aj...
Désactiver « Recevez les offres spéciales de nos partenaires » | Astuce Prestashop 1.6...
views 2860
 Cette phrase  "Recevez les offres spéciales de nos partenaires"  apparait lors de la création d'un compte comme vous pouvez le voir sur la photo ci-dessous Sous quel terme se trouve cette option dans le back-office de Prestashop  Dans le back office de Prestashop, cette phrase est englobée sous le terme "Opt-in" Comment supprimer cette option dans le back-office de Prestashop  Voici la...
Transformer les tabs de la page d’accueil en bloc | Astuce Prestashop 1.6
views 5150
 Ce tutorial va vous permettre de transformer les tabs "Populaire", "Meilleurs ventes", "Nouveaux Produits" et "Promotions" de la page d'accueil en bloc Cette astuce Prestashop a été testée sur la version 1.6.1 Attention, cette astuce est conseillée pour les personnes qui connaissent un minimum Prestashop, html et css. A)  Bloc Populaire 1)  Aller dans Modules > Positions. 1.1 ) D...
Où Changer le nom de sa boutique | Astuce Prestashop 1.6
views 3683
 Si vous désirez modifier le nom de votre boutique sur le cms Prestashop, suivez ce petit tuto Comment modifier le nom de sa boutique depuis le back-office de Prestashop ? Connectez-vous au back-office de Prestashop Allez dans Préférences > Coordonnées et Magasins 3. Il faut scroller un peu jusqu'à "Coordonnées" Cette partie propose plusieurs réglages : - Nom de la bout...

12 réponses à “Astuce : Centrer votre menu dans Prestashop 1.6”

  1. Tirips dit :
    26 mai 2015 à 19 h 21 min

    Dommage que personne n’ai laissé de commentaire sur ce tuto qui marche impec… en prenant le bon superfish-modified.css 😉
    (theme/votre thème/css/modules/blocktopmenu/css/superfish-modified.css).

    Merci à toi !

  2. Tipotam dit :
    27 août 2015 à 13 h 02 min

    Merci pour le ti tuto,

    sa marche nickel pour moi.

  3. Valentin dit :
    10 octobre 2015 à 18 h 24 min

    Bonjour,

    Tuto qui marche niquel sur un ordinateur, mais pour la version mobile, le menu part en vrille.

    Si vous avez une solution ?

    Cordialement

  4. c_majory dit :
    11 octobre 2015 à 13 h 11 min

    Bonjour,

    Il faut utiliser les media queries

  5. Clemence dit :
    22 février 2016 à 23 h 06 min

    Merci pour le tuto,
    C’est parfait pour le menu, mais cela a impacté mes sous-catégories, qui se retrouvent centrées et le menu devient illisible.
    D’où vient mon erreur ? comment corriger cela?

    merci d’avance 🙂

  6. julien dit :
    23 février 2016 à 9 h 10 min

    super merci beaucoup.

  7. c_majory dit :
    23 février 2016 à 13 h 40 min

    Bonjour,

    Comme ca il est difficile de répondre, il faut que je vois votre code.

  8. roussette dit :
    1 avril 2016 à 10 h 37 min

    ligne 164 localhost/prestashop/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css
    remetter la même chose: display: inline-block et text-align: center

  9. hajar dit :
    17 août 2016 à 11 h 25 min

    je modifie sur le code mais y a rien changer au mon site j’ai rien compris quelqu’un peut m’aider?

  10. c_majory dit :
    23 août 2016 à 11 h 02 min

    Bonjour,

    si rien ne change, c’est un problème de cache, il faut le nettoyer

  11. herman dit :
    12 septembre 2016 à 19 h 28 min

    Bonjour,
    super! et merci beaucoup pour le tuto, et -il possible d’afficher en arborescence la listes de mes produits directement dans chaque categories/sous-catégorie du menu ?
    Car pour le moment prestashop peux afficher des produits directement, mais en meme rang que les categories du menu.
    avez vous une solution ?
    merci d’avance

  12. c_majory dit :
    14 septembre 2016 à 10 h 21 min

    Malheureusement il n’est pas possible de faire ca avec le module par défaut de Prestashop. Vous avez ce module (16$), beaucoup plus poussé. Je ne l’ai pas encore testé mais il semble avoir de bon avis.

    https://codecanyon.net/item/finalmenu-prestashop-menu/8230997?s_rank=1

    Cordialement

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *