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

.sf-menu {
  text-align: center;
  position: relative;
  padding: 0;
  width: 100%;
  border-bottom: 3px solid #e9e9e9;
  background: #f6f6f6; }

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

.sf-menu > li {
    border-right: 1px solid #d6d4d4;
    display: inline-block;
    margin-bottom: -3px;
}

Et voila le resultat :

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

Articles similaires

Prestashop 1.6 | Slider sur toute la largeur sur votre page d’accueil
views 9373
Voici un tutorial qui va vous permettre d'afficher le slider de votre page d'accueil sur toute la largeur. Valable pour prestashop 1.6 A noter : la largeur maximum de l'ensemble de votre contenu est 1170px.  Si vous désirez afficher une photo correctement sur votre site, je vous conseille une largeur de 1170px. La hauteur est libre. Update : il se peut que ce tuto ne fonctionne pas. La no...
Quelques astuces pour vous aider à créer un site e-commerce avec Prestashop
views 1025
Créer son site e-commerce avec Prestashop n'est pas toujours facile. Je mettrais régulièrement des documents que vous pourrez télécharger afin de mieux vous aidez dans la création de votre site e-commerce. Document 1 : Modèle de cahier des charges  Avant de se lancer dans l'aventure de l'e-commerce, il est très important de mettre par écrit un ensemble d'informations qui va vous aider pour la su...
Insérer une page CMS sur votre formulaire de contact | PrestaShop 1.6
views 2680
Vous désirez insérer une page cms à l'intérieur de votre formulaire de contact de votre boutique PrestaShop Rien de plus simple avec ce petit tuto ! Etape 1 : Override du fichier : ContactController.php Créer un fichier qui se nommera ContactController.php et placez le dans  override/controllers/front/ puis insérez le code suivant : class ContactController extends ContactControll...
Guide complet pour vos campagnes Google Adwords
views 501
Ce guide est en vente sur Amazon.fr et offert en format PDF.  Complet, Intuitif et plein d'astuces. Allez jeter un oeil ! Besoin de gérer des campagnes Google AdWords ? Allez découvrir la formation AdWords proposée par refeo.com, vous trouverez, en plus des précieuses informations livrées, un guide complet qui vous expliquera tous les contours de l'outil Google AdWords, de même que la façon dont...
3 produits achetés le 2ème gratuit | Astuce Prestashop
views 5068
Vous désirez mettre en place une campagne de promotion : x produits achetés, 1 offert. Il est très facile de configurer ce cas de figure dans Prestashop Comment mettre en place cette promotion dans le back-office de Prestashop  ?  A) Connectez-vous au back-office de Prestashop B) Allez dans l'onglet Promotions > Règles Paniers C) Configurer les informations comme ci-dessous ...

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

  1. Tirips dit :

    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 :

    Merci pour le ti tuto,

    sa marche nickel pour moi.

  3. Valentin dit :

    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 :

    Bonjour,

    Il faut utiliser les media queries

  5. Clemence dit :

    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 :

    super merci beaucoup.

  7. c_majory dit :

    Bonjour,

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

  8. roussette dit :

    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 :

    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 :

    Bonjour,

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

  11. herman dit :

    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 :

    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 *