Besoin d'aide sur un nouveau template

[FlodAriege]

Bonsoir,

Voilà, ça y est : je me lance, je change de template

Le précédent (Joomlashine JSN) provoquait une erreur JS que même le concepteur n'est pas arrivé à résoudre.

Dans la foule des templates gratuits, j'en ai trouvé un qui me plait bien, mais qui nécessite quand même quelques adaptations.

Je l'ai déployé sur une copie de mon site en ligne sur un sous-domaine, ici:
(URL supprimée, sous-domaine supprimé)

Je donne une URL "profonde" car pour l'instant ma page d'accueil n'affiche pas grand chose (modules en position spéciale du précédent template).

A ce stade, je me concentre essentiellement sur la navigation.
(J'avais essayé de réutiliser le JUX megamenu que j'avais sur mon site, mais c'est un enfer : le menu chevauche le logo, je n'arrive pas à faire passer le logo au-dessus).

Sur le menu du template, je pense avoir compris comment le rendre sticky (position: fixed) mais... il doit y avoir autre chose à paramétrer car comme vous le verrez si vous essayez, quand je fais ça le contenu de la page passe en-dessous du menu, derrière quoi.

C'est là que je commence à avoir besoin de votre aide : j'ai du mal à identifier le "container" ou "position" sur laquelle je dois agir pour :
- éviter que le contenu passe dessous / derrière le menu
- éviter que l'ombre s'arrête avant le bord

Après, ça ne relève à mon avis plus du CSS mais d'autre chose : le menu ne détecte pas le bord de l'écran, et les liens de menu les plus à droite s'ouvrent... en dehors de l'écran !!
Sauriez-vous me dire comment résoudre ça ?

Merci d'avance, ça fait des heures que j'essaie toute seule, mais je n'ai pas le niveau...

Bonne soirée, moi j'y retourne

Flo

[RobertG]

Je ne comprends pas ton histoire de menu : si tu le rends fixe (il n'est pas fixe actuellement donc difficile de voir s'il y a une anomalie), il est normal que le texte passe derrière, sinon on ne verrait plus ce menu.
Je ne vois pas de quelle ombre tu parles, je n'en vois pas sur la page que tu cites.
Avec quel navigateur et quelle largeur d'écran as-tu ces soucis ? Je viens de tester sous Chrome le rétrécissement de la fenêtre sans constater de problème.

[pmleconte]

Bonjour Flo,

Au niveau de ton menu, pour le rendre "sticky", il faut ajouter un peu de CSS:

#fav-headerwrap{position: fixed;z-index: 900;width: 100%;
}

le 100% permet de prendre toute la largeur.

Par contre, au niveau du dépassement, il faut modifier autre chose, mais, cela devient compliqué car c'est violent au niveau du nombre de sous-menus et du nombre de caractères de chaque sous-menu.

un #fav-headerwrap .favnav .nav-child {position:static} peut aider, mais, il faudrait peut-être un peu simplifier tout cela ou changer de menu. Essayez, par exemple, Maxi Menu de Cedric : https://www.joomlack.fr/extensions-joomla/maximenu-ck

Il gère bien aussi le sticky.

Pascal

[FlodAriege]

Salut les gars,
Vous ne pouvez pas savoir comme je suis contente de vous "voir" !

Alors, je vais essayer d'être plus claire :

Je ne comprends pas ton histoire de menu : si tu le rends fixe (il n'est pas fixe actuellement donc difficile de voir s'il y a une anomalie), il est normal que le texte passe derrière, sinon on ne verrait plus ce menu.

Bonjour Robert,

... le problème, c'est que le texte passe derrière même quand on est en haut de la page.
Par exemple sur ma page d'accueil, ici :
(URL supprimée, sous-domaine supprimé)

il devrait normalement y avoir un titre au-dessus du texte !

Et si tu décoches la valeur
position: fixed;
dans la console, tu verras le titre réapparaître.

Au niveau de ton menu, pour le rendre "sticky", il faut ajouter un peu de CSS:

#fav-headerwrap{position: fixed;z-index: 900;width: 100%;
}

le 100% permet de prendre toute la largeur.

Bonjour Pascal,

Merci pour ce code, je n'arrivais pas, avec la seule valeur fixed, à obtenir ce résultat.
Mais comme je l'explique à Robert ci-dessus, il y a un truc qui déraille, car le contenu de la page débute tout en haut de l'écran derrière le menu ;(
Je ne parle pas de défilement, je parle bien de l'état de la page avant d'avoir scroller quoi que ce soit.

Par contre, au niveau du dépassement, il faut modifier autre chose, mais, cela devient compliqué car c'est violent au niveau du nombre de sous-menus et du nombre de caractères de chaque sous-menu.

un #fav-headerwrap .favnav .nav-child {position:static} peut aider, mais, il faudrait peut-être un peu simplifier tout cela ou changer de menu. Essayez, par exemple, Maxi Menu de Cedric : https://www.joomlack.fr/extensions-joomla/maximenu-ck

Il gère bien aussi le sticky.

Pascal

Je suis d'accord avec toi, un menu classique est mal adapté à l'architecture de mon menu (historiquement sur mon site, j'avais ... 5 menus ! Mais comme c'était vraiment très nul, j'ai tout réuni en un seul et unique. Du coup, un megamenu devient indispensable. A condition d'arriver à le mettre en place correctement dans le header)

Pour tout dire, j'avais un megamenu (comme je l'écrivais dans mon 1er post, mais il est vrai que je suis si longue qu'on peut avoir tendance à lire en diagonale, désolée).

Je l'ai republié sur une section du site, pour pouvoir te/vous montrer mon problème.
Ici :
(URL supprimée, sous-domaine supprimé)
et dans toutes les pages filles de cette rubrique, on peut voir mon megamenu à l'oeuvre.

Problème : le logo disparait derrière le menu

Question :
Saurais-tu me dire ce que je dois faire pour obliger le logo à passer au-dessus du menu, comme il le fait normalement sur ce template avec le menu normal si on rétrécit l'écran ?

Pour te donner une idée du résultat auquel je souhaite parvenir, voici le lien du site en production, qui utilise toujours l'ancien template et le megamenu) :

https://www.rouchenergies.fr

NB: j'avais choisi ce megamenu car celui de Cédric (je dis ça de mémoire) ne devait pas permettre d'afficher les liens de niveau 3 sur mobile)


Merci

Flo

EDIT: comme je n'arrivais pas à mes fins avec mon Jux Megamenu, j'ai installé DJ Megamenu, et... c'est une catastrophe. La seule bonne nouvelle c'est que je ne masque plus le logo (ce qui est quand même un minimum), mais alors... impossible de gérer le padding pour faire s'afficher tous mes liens sur deux lignes "seulement" et pour réduire un peu la hauteur totale... Les "arrow" censées s'afficher à droite des liens de menu sont manquantes et n'affichent que des rectangle... Bref, je suis à deux doigts de passer tout le sous-domaine par la case poubelle.
Je lâche l'affaire pour ce soir, j'ai gâché tout un week-end avec ça.
Du coup mon vieux template me parait bien plus sympa d'un coup (sauf qu'il a une erreur JS qui me pose pas mal de problème).
IL faudrait que j'arrive à remettre "contact" et "devis gratuit" sur un petit menu séparé comme sur mon site en production, de manière à ne garder "que" 8 liens dans le menu principal (quitte à virer le home et la recherche). Mais je n'y arrive pas avec ce template.