Menu horizontal sur une seule ligne sur toute la largeur

[supernewbie]

Bonjour à tous ! J’espère être au bon endroit sur le forum..
Je viens chercher de l’aide sur Prestashop 1.7 (1.7.2.4) sur le thème par défaut.

Je souhaiterai modifier le header (logo, menu, barre de recherche) de telle sorte que le menu horizontal tienne sur une ligne et non deux. En effet, dès qu’il y a trop de catégories le menu se met sur deux lignes.

Voici ce que ça donne avec le problème :
-menu-1.jpg

Je souhaiterai ce genre de résultat ci-dessous avec le logo au centre (fait sous Photoshop) :
-menu-2.jpg

Dans cet exemple la barre de recherche n’a pas bougé mais je ne suis pas contre de la déplacer, ainsi que le logo.

Comment faire cette modification proprement sans trop toucher au code et que tout reste évidemment responsive sur tout support.

Merci beaucoup pour l’aide que vous pourriez m’apporter ;-)
Supernewbie

[Ced17]

Bonjour,

Il va falloir toucher au code pourtant, à voir. Avez-vous un lien svp merci.

[AxelV]

Je serais également intéressé par cette solution.

[Ced17]

Bonsoir,

Après plusieurs essais, j'ai obtenu ceci, à tester sur vous en sauvegardant bien sur avant toutes modifications pour un retour arrière possible.

Allez dans     \themes\classic\templates\_partials\header.tpl

puis rajouter 1 au container puis 0 au md-2 pour modifier la classe (voir img)

 

Greffer le module bloc recherche sur displaynav2, et le degreffer de header. Puis modifier en css:

.search-widget {  theme.css ligne 7  (colonne 111736)

float: right;

padding-top: 3px; }* Valeur à rajouter *

Puis:

@media (min-width: 1200px){.container1 {width: 1423px;max-width: 100%;} }

@media (min-width:992px){ul#top-menu{display:inline-flex;padding: inherit;* Valeur à rajouter *} }     (  Ajouter ces lignes en rouge au fichier custom.css )

 

@media (min-width: 768px) {     
.col-md-02 {
    margin: auto;  
    width: 16.66667%;
    padding-bottom: 10px; }  }

#mobile_top_menu_wrapper #top-menu {     
    margin-bottom: .625rem;
    padding-left: 10px; }  

Néanmoins, après l'affichage de 10 catégories en ligne, elle ne reviennent pas a la ligne j'y travaille, a moins que quelqu'un est la soluce.

Merci

N'oubliez pas de vider les caches après modifs

Edited June 6, 2018 by Ced17
correction code (see edit history)

[supernewbie]

Bonsoir Ced17!
Merci beaucoup de m'avoir apporté une solution mais je n'ai malheureusement pas réussi à reproduire comme vous, j'ai du zappé un truc..
Je n'ai pas modifié le fichier theme.css mais custom.css, je ne sais pas si je le remplis correctement du coup... et le fichier header.tpl a bien été modifié.

En ce qui concerne la modif, la barre de recherche tout en haut du header c'est pas mal, par contre ici elle dépasse à droite et l'icone "loupe" est décalée.

Dans mon cas, le menu ne se place pas sous le logo et tout vire sur le côté gauche.(voir capture)

Je pense avoir bien respecté votre code CSS, je vous fait une copie du CSS ci-dessous avec vos modifications (j'ai juste rajouté les deux accolades de fermeture qui manquaient).

Que signifie [spam-filter] ?

code CSS :

.search-widget{
float: right;
padding-top: 3px; }

@media (min-width: 1200px){.container1 {width: 1423px;max-width: 100%;[spam-filter] [spam-filter]
@media (min-width:992px){ul#top-menu{display:inline-flex; padding: inherit;[spam-filter]

@media (min-width: 768px)     
.col-md-2 {
  /* float: left;*/
    margin: auto; 
    width: 16.66667%;
    padding-bottom: 10px; }

#mobile_top_menu_wrapper #top-menu {         
    margin-bottom: .625rem;
    padding-left: 10px; }

SUPERNEWBIE

 

[Ced17]

il y a 34 minutes, supernewbie a dit :

:

.search-widget{
float: right;
padding-top: 3px; }

@media (min-width: 1200px){.container1 {width: 1423px;max-width: 100%;[spam-filter] [spam-filter]
@media (min-width:992px){ul#top-menu{display:inline-flex; padding: inherit;[spam-filter]

@media (min-width: 768px)     
.col-md-2 {
  /* float: left;*/
    margin: auto; 
    width: 16.66667%;
    padding-bottom: 10px; }

#mobile_top_menu_wrapper #top-menu {         
    margin-bottom: .625rem;
    padding-left: 10px; }

Même si vous modifiez le custom, ça devrait le faire. Il manque des balises d'ouvertures et fermetures pour les médias à partir de 768px. Je ne sais pas pourquoi il remplace les accolades.

Je ne suis plus devant l'ordi, je verrai demain mantenant. 

Bonne soirée

[Ced17]

Bonjour,

De plus, la classe container1 ne fonctionne pas chez vous. Ce qui empêche le logo d'être au milieu. 

Modifier le directement dans le thème.css pour voir.

Ensuite vider bien les caches également Celui du navigateur, et je verrai ce soir en rentrant du taf.

Bonne journée

[Ced17]

Le 19/02/2018 à 11:37 PM, Ced17 a dit :

@media (min-width:992px){ul#top-menu{display:inline-flex;padding: inherit;* Valeur à rajouter *} } 

On va modifier cette ligne pour pouvoir avoir un retour a la ligne si trop de catégories.

Supprimer display: inline-flex;

Il doit vous rester que padding: inherit;

Par contre, on va ajouter ces lignes supplémentaires au fichier theme.css :

@media (min-width:992px){#_desktop_top_menu{width:1450px;} }

@media (min-width:768px){#_desktop_top_menu{width:800px;} }  

 

[supernewbie]

Bonjour Ced17,

Je n'ai toujours pas réussi à positionner le logo au milieu mais ce n'est pas grave...

Pour le moment, je vais faire autrement. Par simplicité et par faute de temps, je vais laisser par défaut le logo à gauche et agrandir la largeur du menu, ce qui me permet d'avoir le menu sur une ligne comme souhaité. La barre de recherche s'est automatiquement placée en dessous. Finalement le rendu n'est pas trop mal sans être extraordinaire.

Ci-dessous ma "bidouille" en CSS, sur le fichier custom.css, on peut certainement modifier le CSS autrement et mieux pour avoir le même résultat :

/*** Modif du menu ***/

#header .header-top .menu {
    width: 100%;
    margin-top: 20px;
    font-size: 14px;
}

 #header .header-top a[data-depth="0"] {
    color: #000000;
    border-right: 1px solid #dad9d9;
    margin-top: 10px;
    margin-bottom: 6px;
}

/* module barre de recherche*/
   .search-widget {
   margin-top: 20px;
}

En mode mobile, il ne reste plus qu'à modifier la taille et le positionnement du logo, si besoin.

Par contre en mode tablette (largeur entre 768px et 1199px ?), le menu se met sur deux lignes et pour l'instant je ne sais pas du tout comment régler ce problème, quitte à transformer le menu en "menu hamburger" (lol) comme sur mobile.

Je joins une capture d'écran (version desktop) pour montrer à quoi ça ressemble. Bien entendu il faut modifier le CSS pour rendre plus joli le menu et le header en général mais l'idée est là.

Supernewbie

[Votre Tendance]

Bonjour,

 

J'ai le même souci sauf que je n'ai pas compris la procédure ou du moins pas trouver ou chercher je suis sous prestashop 1.7.3.0

 

Pouvez-vous m'aider ?

 

Dans l'attente de vous lire,

Audrey

[Ced17]

Bonsoir,

Que recherchez-vous exactement?

[Votre Tendance]

Bonjour,

 

J'imerai que le menu soit sur une seule ligne et que le Free et Call sur cette barre de menu mais en colonne (je n'ai pas trouvé ou le modifier non plus pour le mettre en Français et mes coordonnées)

Et lors de la page de chargement il y a un hamburger, je souhaiterai changer l'image aussi.

Merci par avance de toutes ses infos.

Audrey

[Ced17]

Bonjour,

Donnez un lien, et je regarderai ce soir si je peux faire quelque chose.

Bonne journée

[Votre Tendance]

Alors j'ai réussi quelque changement mais pas tout

http://comyouconcept.fr/index.php

[Ced17]

Bonsoir,

Je ne vois pas ce que je peux faire de plus c'est bien la.

[spoke]

bonjour à vous tous.

j'ai rajouté les codes css : suivit à la lettre toute la démarche et au final je me retrouve avec cela.  j'ai mis une capture de mon menue apres modification. je ne sais pas ce que je n"ai pas fait

merci à vous

voici les codes que j'ai inseré dans le fichier theme css

Le 19/02/2018 à 11:37 PM, Ced17 a dit :

Bonsoir,

Après plusieurs essais, j'ai obtenu ceci, à tester sur vous en sauvegardant bien sur avant toutes modifications pour un retour arrière possible.

Allez dans     \themes\classic\templates\_partials\header.tpl

puis rajouter 1 pour modifier la classe (voir img)

 

Greffer le module bloc recherche sur displaynav2, et le degreffer de header. Puis modifier en css:

.search-widget {  theme.css ligne 7  (colonne 111736)

float: right;

padding-top: 3px; }* Valeur à rajouter *

Puis:

@media (min-width: 1200px){.container1 {width: 1423px;max-width: 100%;} }

@media (min-width:992px){ul#top-menu{display:inline-flex;padding: inherit;* Valeur à rajouter *} }     (  Ajouter ces lignes en rouge au fichier theme.css )

 

@media (min-width: 768px) {     theme.css ligne 7 colonne 15052
.col-md-2 {
    /* float: left; */
    margin: auto; * Valeur à rajouter *
    width: 16.66667%;
    padding-bottom: 10px; }  }  * Valeur à rajouter *

#mobile_top_menu_wrapper #top-menu {          theme.css ligne 7  colonne 113707
    margin-bottom: .625rem;
    padding-left: 10px; }  *Valeur à rajouter *

Néanmoins, après l'affichage de 10 catégories en ligne, elle ne reviennent pas a la ligne j'y travaille, a moins que quelqu'un est la soluce.

Merci

N'oubliez pas de vider les caches après modifs

 

[Ced17]

Bonsoir,

Désolé, mais ce soir je ne suis pas disponible. Cependant, c'est loin ce post et je vous suggère après plusieurs autres expériences de rajouter plutôt ce code dans le custom.css. donc ôter le du thème.css comme je l'avais suggéré, puis insérez le dans le custom.

Laissez le lien vers votre site également pour que je puisse aller voir demain. Merci et bonne soirée

[spoke]

bonjour

je viens de glisser le code dans le custom.css et remis le theme.css à l'origine rien semble changer:

voici le lien de mon site: https://aupantheondelaluxure.com

merci à vous

[Ced17]

Bonsoir spoke,

 Tout d'abord, vous avez un module qui est greffé automatiquement en haut des que vous l'avez en footer, c'est le fameux Linkwwidget qui vous vérrole l'affichage en haut. Donc déjà, on le vire en le degreffant du hook displayAfterBodyOpeningTag . et l'affichage redeviendra normal.

Ensuite vous n'avez pas renommer le container ainsi que le col md-2 comme stipulé dans le code, 

Ensuite rajouter ceci a votre custom.css

.search-widget {  theme.css ligne 7  (colonne 111736)

float: right;

padding-top: 3px; }* Valeur à rajouter *

Puis:

@media (min-width: 1200px){.container1 {width: 1423px;max-width: 100%;} }

@media (min-width:992px){ul#top-menu{display:inline-flex;padding: inherit;* Valeur à rajouter *} }     (  Ajouter ces lignes en rouge au fichier custom.css )

@media (min-width: 768px) {     
.col-md-02 {
    margin: auto; 
    width: 16.66667%;
    padding-bottom: 10px; }  } 

#mobile_top_menu_wrapper #top-menu {       
    margin-bottom: .625rem;
    padding-left: 10px; }  

Et cela dit en passant, vous avez fait une grosse erreur sur votre logo car il manque le "R" de luxure.

Bonne soirée

[spoke]

bonjour ced17

merci pour le R oublié dans mon logo.

j'ai suivis à la lettre vos instructions, quand j'ouvre le fichier custom.css,le fichier est vide. Est-ce normal?. j'ai copié les lignes de code et rien a bougé.

je ne sais plus quoi faire.

merci à vous

[Ced17]

Bonsoir, 

Bizarre que votre custom sois vide!! même en copiant ce code et en renvoyant vers votre serveur, il n'y a rien?

[Ced17]

ah je sais, votre code est en commentaire dans le custom, donc n’apparaît pas!! supprimer ceci

[Ced17]

pour le .search-widget, mettez un margin-top a 4px plutôt que le padding.

et rajouter ceci a votre custom également pour remettre d'aplomb le haut compte etc un peu en vrac je dirais  

.myaccount-title a {
    font-weight: 700;
    font-size: 1rem;
    margin-top: 15px;
}

#block_myaccount_infos {
    background: #ebebeb;
    margin-left: 15px;
    color: #acaaa6;
}

[spoke]

voilà tout fonctionne.  la preuve en image

 

merci pour votre aide

[Ced17]

Bonjour,

Bien c'est parfait à un détail près,la couleur de la font 'mon compte' , n'a pas changé par contre. Je verrai ce soir ou rajouter la valeur color:#acaaa6 plutôt dans my account-title a .

Bonne journée.

[spoke]

bonjour

En utilisant la fonction console web de firefox :   je vous ai fait des copies de ces meme lignes + la preuve en image

voici la ligne de code à modifier dans le theme.css :6.      (impossible a trouver)

#header

.header-nav . blockcart

    background: #ebebeb;      ( remplacer par : #ffffff )
    height: 3rem;
    padding: .75rem;
    margin-left: .9375rem;
    text-align: center;
    white-space: nowrap;

ligne de code dans le theme.css : 23       (impossible a trouver)

#block_myaccount_infos {
    background: #ebebeb;
    margin-left: 15px;
    color: #acaaa6;          
}
.col-md-2 {
    float: left;
    width: 20%;

ligne de code dans le theme.css: 4   (impossible a trouver)

.search-widget {
    float: right;
    margin-top: 4px;
}
.search-widget {
    float: right;
}
.col-lg-4 {
    float: left;
    width: 33.33333%;
}
.col-md-5 {
    float: left;
    width: 41.66667%;
}
.col-sm-12 {
    float: left;
    width: 100%;
}

[Ced17]

Bonjour,

pas besoin de les chercher , quand vous les mettez dans votre custom.css, normalement cela a  pour effet d’écraser la valeur d'avant.

[spoke]

bonjour

jai réussi a rajouter des lignes de code dans le custom.css concernant mon compte mais , un nouveau probleme se présente dans le footer, un encadrer apparait aussi. Je dois créer une ligne de commande concernant le footer?.

[Ced17]

Bonjour, 

Oui effectivement quand vous modifié certains éléments, comme le bloc mon compte dans votre cas, cela le modifie également partout où est greffé ce module. Il faut voir , pas avant ce soir par contre.

Bonne journée

[Ced17]

Pouvez-vous préciser quelle ligne de code vous avez mis dans custom.css merci.

 

[spoke]

bonjour

le bloc mon compte est gréffé dans le  ¨displayFooter¨ et ¨displayNav2¨. je l'ai supprimé dans le displayfooter.

dans le custom.css voici les lignes de code.   Et je cherche a faire la meme chose pour la barre de recherche

  (pour le bloc mon compte)

#block_myaccount_infos {
    background: #ffffff;
    margin-left: 15px;
    color: #ba51f2;
    border :2px solid #ba51f2
}

(pour le caddie)

#header .header-nav .blockcart {
   background: #ffffff;
   color: #000000;
   border: 2px solid #ba51f2
}

[Ced17]

Bonjour,

Ok je regarde tt à l'heure. Merci

[Ced17]

Bonsoir,

Pour faire pareil sur le bloc recherche, rajouter ceci au custom.css

.search-widget form input[type=text] {
    border: none;
    padding: 10px;
    min-width: 255px;
    /* background: #ebebeb; */
    color: #acaaa6;
    outline: 2px solid #ba51f2; * Valeur a rajouter *
}

.search-widget form input[type=text]:focus{
  border: 2px solid #ba51f2;
}

[spoke]

bonjour

j'ai réussi a modifier le header grace à vos conseils, merci

je vais encore solliciter votre aide de nouveau. je m'attaque au footer. je cherche a déplacer la barre newletter et la mettre sur la même ligne que ¨informations¨ et intégrer juste en dessous les logos  ¨reseau sociaux¨.

.block_newletter  col-lg-2   (tout est tassé)

[Charles98]

Bonjour, 

je suis tout nouveau avec Prestashop, je viens de commencer un projet de site depuis deux semaines, alors je ne fais qu'apprendre depuis... mais je ne comprends pas toujours tout, j'espère devenir plus compétent avec le temps...

J'ai suivi ce sujet avec intérêt car je désire aussi:

1) Insérer le module de recherche dans la barre du haut dans le thème "classic" de presta 1.7 à côté de mon panier

2) Laisser le logo à droite  avec une taille décente !!

3) avoir le menu sur toute la longueur en dessous du logo.. le sujet a bien été traité ici mais malgré les explications, je n'y suis pas arrivé...

J'espère qu'un membre du forum aura deux minutes pour expliquer comment faire au débutant que je suis

Merci d'avance

Charles

[thebigbear67]

Bonjour à tous , 

je dois avouer ne pas avoir compris grand chose à vos explication mais personnellement 

j'ai fait très simple 

suis aller dans le back office ---> dans la section position --->>> j'ai trouver menu principal ---> j'ai cliquer sur modifier et le l'ai gréffé dans ''' displayNavFullWidth ''' 

ensuite j'ai juste rajouter ceci au fichier custom.css

.div#_desktop_top_menu {
    width: 100%;
    text-align: center;
    font-size: 23px;
}

et c'est tout.

on peu y rajouter le" text shadow "

ou un font- famille pour être tranquille

prévu d'origine et cela ressemblera a un truc bien.

 

[siam gr]

bonjour, 

j'ai une questionne comment faire pour apparaître les catégories visible 

et merci à l'avance 

[thebigbear67]

Il y a 15 heures, siam gr a dit :

bonjour, 

j'ai une questionne comment faire pour apparaître les catégories visible 

et merci à l'avance 

back office ---> modules manager ---> taper menu 

 

[siam gr]

merci pour votre réponse le problème c'est que j'ai créé les catégories et les sous catégories mais dans la page d'accueil de site elles n'ont pas apparu 

[Charles98]

On 4/26/2019 at 1:22 PM, thebigbear67 said:

Bonjour à tous , 

je dois avouer ne pas avoir compris grand chose à vos explication mais personnellement 

j'ai fait très simple 

suis aller dans le back office ---> dans la section position --->>> j'ai trouver menu principal ---> j'ai cliquer sur modifier et le l'ai gréffé dans ''' displayNavFullWidth ''' 

ensuite j'ai juste rajouter ceci au fichier custom.css

.div#_desktop_top_menu {
    width: 100%;
    text-align: center;
    font-size: 23px;
}

et c'est tout.

on peu y rajouter le" text shadow "

ou un font- famille pour être tranquille

prévu d'origine et cela ressemblera a un truc bien.

 

@thebigbear67, merci beaucoup pour cette réponse qui répond bien à ma question, je cherche maintenant quoi modifier dans le css pour que le premier item du menu soit aligné avec le logo qui est au dessus.  Je me demande aussi pourquoi le texte du menu qui était en majuscules est désormais en minuscules... je vais chercher un peu, mais je suis encore un gros nul en custo prestashop  

 

[Charles98]

Bon, en modifiant le fichier header.tpl , ça fonctionne pour la page d'accueil, il suffit d'ajouter les div container et row, comme ci-dessous

  <div class="container">   {* modifs charles pour menu aligné *}
       <div class="row">

              {hook h='displayNavFullWidth'}

        </div>
      </div>

mais ce n'est pas tout, il y a un autre header.tpl dans checkout/_partials qu'il faut modifier également.., sinon lorsque l'on est en train de passer commande, le menu est à nouveau là mais toujours pas aligné... grrr  

Edited May 3, 2019 by Charles98
made progress on my enquiry (see edit history)

[siam gr]

merci bcp pour votre réponse les catégories sont affichent dans la page d'accueille . comment modifier son position ?