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

 Comment créer une fiche Produit sur Prestashop 1.7
views 10399
 Dans ce tutoriel, nous allons voir comment créer une fiche produit dans Prestashop 1.7. Comme vous pourrez le constater, cette page diffère totalement de Prestashop 1.6. Elle a été totalement repensée afin de la rendre plus allégée et plus facile d’utilisation. Etant encore en cours de développement, les traductions ne sont pas encore finies et il reste encore des soucis de mise en page. ...
Ajouter « produit deja acheté » sur la page produit | Prestashop 1.6
views 848
 Aujourd'hui, nous allons voir comment ajouter la notification "Produit déjà acheté le ....." sur la page produit. Cette astuce (donnée par Nemops) est valable pour Prestashop 1.6. Très rapide à mettre en place. --------------------------------------------------------------- Dans ce tutorial, nous allons "overrider" les fichiers. Si vous upgradez Prestashop, les fichiers modifiés n...
Désactiver le bouton Comparer | Astuce Prestashop 1.6
views 2304
 On me demande très souvent comment on désactive la partie « comparer » dans le back office de Prestashop. C'est très simple : Allez dans le back office de Prestashop puis dans Préférences > Produits, puis mettre 0 à comparaison de produits Et voila le tour est joué.
Le nouveau menu du back-office de Prestashop 1.7 – Partie 2
views 5486
 Pour rappel, le menu du back-office de Prestashop 1.7 est organisé en 3 parties : Vendre qui regroupe les commandes, le catalogue, les clients, le SAV et les statistiques (voir l'article)  Personnaliser qui regroupe les modules, le design, le transport, le paiement et l’international Configurer qui regroupe les préférences et les paramètres avancés. Dans cet article, nous allons ...
Désactiver « Suivez le guide : découvrez PrestaShop « 
views 465
 Vous en avait marre de voir la bannière "Suivez le guide : découvrez PrestaShop ", sur vos pages ? Dans ce cas, suivez ce tuto Comment désactiver "Suivez le guide : découvrez PrestaShop " Depuis le back-office, allez dans Modules et Services > Modules et Services et recherchez le module OnBoarding. Installez-le et le tour est joué  

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 *