Jump to content
supernewbie

Menu horizontal sur une seule ligne sur toute la largeur

Recommended Posts

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

menu-1.JPG

menu-2.jpg

Share this post


Link to post
Share on other sites

Bonjour,

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

Share this post


Link to post
Share on other sites

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.

Screenshot_2.thumb.png.ecf4e7bfc9f60688d0e01a2464f185fa.png

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

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

 

Screenshot_1.png.1be287f916749d711c99d61a50368250.png

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 by Ced17
correction code (see edit history)

Share this post


Link to post
Share on other sites

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

 

Capture.thumb.JPG.b2143e3a970481f91c362401d3517f83.JPG

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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;} }  

Screenshot_1.thumb.png.c90eeb9bab252b1976aec4ba58029b98.png

Screenshot_2.png.464d42f13b0fbf816b0b49d4ecb8cde4.png

 

Share this post


Link to post
Share on other sites

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

menu horizontal.JPG

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Bonjour,

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

Bonne journée

Share this post


Link to post
Share on other sites

Bonsoir,

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

Share this post


Link to post
Share on other sites

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.

Screenshot_2.thumb.png.ecf4e7bfc9f60688d0e01a2464f185fa.png

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

puis rajouter 1 pour modifier la classe (voir img)

Screenshot_1.png.1a00c7de0d84e30eab87827791ad4328.png

 

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

 

capture header.png

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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, 

Screenshot_1.png.1d4b9c87e7888805abd9b58795a8289b.png

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

Share this post


Link to post
Share on other sites

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

header sans ligne de code.png

header avec ligne de code.png

Share this post


Link to post
Share on other sites

Bonsoir, 

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

Share this post


Link to post
Share on other sites

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

Screenshot_1.png.15a6a4d67d5519e343fea99bade0032d.png

Share this post


Link to post
Share on other sites

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;
}

Share this post


Link to post
Share on other sites

voilà tout fonctionne.  la preuve en image

 

merci pour votre aide

new header.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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%;
}

capture 1 blockcart.png

capture 2  blockmyaccount.png

capture 3  search_widget.png

capture 4  theme.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?.

capture 1 mon compte.png

capture  footer.png

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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
}

Share this post


Link to post
Share on other sites

Bonjour,

Ok je regarde tt à l'heure. Merci

Share this post


Link to post
Share on other sites

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;
}

Share this post


Link to post
Share on other sites

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é)

footer.png

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

 

  • Like 2

Share this post


Link to post
Share on other sites

bonjour, 

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

et merci à l'avance 

Share this post


Link to post
Share on other sites
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 

 

Share this post


Link to post
Share on other sites

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 

Share this post


Link to post
Share on other sites
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 :) 

 

Share this post


Link to post
Share on other sites

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 by Charles98
made progress on my enquiry (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More