Menu avec logo au milieu du menu

Bonjour
Je cherche à réaliser un nouvel header avec un logo au milieu du menu, uniquement pour les PC.
J'ai trouvé plusieurs solutions mais aucune ne conviennent parfaitement d'ou plusieurs questions :

1/ comment mettre une image à la place du texte (la plupart des exemples)
2/ peu utilise nav !, du coup je me demande quelle est la meilleure pratique (si vous pensez comme moi) pour le prendre en compte: html, class=nav ?
3/ quelle serait celui qui serait préférable selon votre expérience ?
4/ pas besoin de l'afficher en mode responsive, je partirai sur un hamburger plus simple avec le logo au dessus du hamburger (si conseil)

Voici les exemples trouvés:
a) https://codepen.io/andrewmanswell/pen/pBbMKZ
b) https://codeconvey.com/responsive-navigation-with-centered-logo/
c) https://stackoverflow.com/questions/50832095/how-to-create-menu-with-a-logo-in-the-middle-using-html-and-css
le plus simple, peut-être le meilleur ?
d) https://colorlib.com/wp/template/website-menu-10/
celui là est accessible via inscription. Je reçois un zip de ~2mo, déjà un frein pour extraire l'info utile (je peux l'envoyer pour les réfractaires à l'inscription, mais je pense que l'on peut quand même l'étudier comme cela)
e) https://codepen.io/Navedkhan012/pen/QdgVpY
me semble moins bien.

@+

Bonjour,

Ton logo peut faire partie du code via une balise img , ce n'est pas qu'une simple décoration.

Si ton menu est ta navigation principal, alors utilise nav sans craintes.

En considérant le <del>premier</del> deuxieme exemple que tu donnes, flex est effectivement simple pour la mise en œuvre, mais préfère la règle order pour repositionner tes éléments, celle-ci est officielle.

:nth-child(n) et le sélecteur ~ te seront utiles pour appliquer order à telle ou telle balise selon leur position dans leur conteneur.

Si le nombre de lien peut varier, tu peut aussi préparer quelques règles en fonction des nombres de liens que tu peut avoir (note que ça marche bien avec les chiffres pairs) en comptant leur position depuis le dernier (se trouvant être aussi leur position depuis le premier element, le logo faisant partie des éléments à compter).
par exemple avec le logo + 6 liens (7 elements) :
* le 3eme lien se trouve en position 4
* en comptant depuis le dernier liens, il se trouve aussi en position 4
Pour le cibler , uniquement dans une liste de 7 éléments, il te suffit de faire pour qu'il réponde aux deux conditions précédentes

a:nth-child(4):nth-last-child(4) {} 

A partir de là, tu peut modifier l'ordre d'affichage des éléments.
par défaut order à la valeur 0.
En appliquant order:1 à img , elle s'affichera derrière tous les liens.
Sur une liste de 7(6 liens) , on sait où se trouve le 3éme lien, il faut donc modifier order pour tous ceux qui le suivent, on reprend la règle précédente à laquelle on ajoute le sélecteur d'adjacence ~ ce qui donne .

a:nth-child(4):nth-last-child(4) ~ a {order:1;} 

les trois derniers liens vont donc repasser derrière l'image du logo A valeur identique pour order, l'ordre reprend celui du code HTML , defaut est 0 .

Exemples avec des série de lien différentes et une série de sélecteurs préparés à l'avance. https://codepen.io/gc-nomade/pen/RwMpMdP Si le nombre de liens est connu et toujours le même, alors une seule règle suffit. Pour les séries impaires, à toi de choisir si tu veut que le LOGO soit décentré à droite ou à gauche ou juste relégué en fin ou début.

Cdt
Modifié par gcyrillus (20 Jul 2022 - 09:21)

Bonsoir
@gcyrillus
Merci pour cette solution qui est encore une autre façon de faire.
Je reformule pour mes questions pour être sûr d'avoir bien compris
1/ bien utiliser une balise IMG
2/ bien utiliser une balse NAV
Bon déjà cela me rassure même en étant pas un pro du css, il me semblait que c'était de meilleures pratiques.
3/ tu me fais une proposition. Chouette néanmoins heureusement qu'il y a la démo car je suis pas assez bon pour tout comprendre l'explication et l'intérêt par rapport aux autres?

4/ bon la suite est maintenant de l'adapter par rapport à mon menu actuel
https://cochanger.eu/organisations/lieu/cochanger-eu
Il faut savoir qu'avant je subissais le menu standard du cms joomla, maintenant je fais un module HTML personnalisé ou je peux mettre le HTML que je veux. Il en découle que je dois gérer ce que faisait avant le cms !
Du coup, je vois 2 problèmes
5/ c'est à moi de détecter pour que le menu soit responsive (test rapidement fait avec tous les exemples dont le tien ou il n'est pas pris en compte).
Quelle valeur et comment le faire ?
Après j'imagine qu'il faudra que je fasse un 2ème menu avec un code type hamburger!
6/ En fait je passe à cette structure de menu car sur ce site asso, j'ai plus de 7 items. Je vais donc devoir gérer les sous-menus et je ne sais pas faire!
Est-ce tjs envisageable avant que je m'enfonce ?

La structure du menu HTML serait proche de
ACCUEIL / DOCUMENTS / EXPÉRIENCES / LOGO / ORGANISATIONS / QUE FAIRE ?
Le sous-menu de DOCUMENTS étant composés de 6 items
Le sous-menu d'ORGANISATIONS étant composés de 4 items

bonne digestion

Pour commencer:

1) tu peut modifier les chiffre des selecteur de positionement (:nth-x(n)) ex: ul > :nth-last-child(3):nth-child(4) qui va trouver le li "expériences" (voir mon post précédent)

2) je tenterais pour commencer, seulement d'appliquer les css de base de mon exemple à ta liste imbriquée ( le flex , position et les display) , puis le selecteur ;nth-machin-truc pour cibler ton élément de liste qui doit se trouver juste devant le logo.(LOGO manquant dans le source actuelle de ta page)

3) tu peut garder ton button et ton span qui fonctionnent, je ne vois pas de logo sur ta page, donc pas d'avis à te proposer. Idem pour tes points de ruptures, si ils te conviennent gardes les.

Enfin, tu as deux balises NAV imbriquées, conserves en une seule avec les class dont tu as réellement besoin. L'architecture de ton code est similaire à mon exemple, ce qui t’intéresse c'est éventuellement les styles de la liste en flex et du menu déroulant, le burger tu en as déjà un, donc zap celui de mon exemple(et ses styles) et pour le makeup, idem, tu as déjà.
exemple repris avec moins de style https://codepen.io/gc-nomade/pen/abYWdNM?editors=1100 et un pseudo élément pour injecter un élément supplémentaire vide pour mettre le logo au centre.

Cdt
Modifié par gcyrillus (20 Jul 2022 - 14:21)