[Résolu] Finaliser un menu haut ergonomique sur une seule ligne

Bonjour
Bon j'ai allégé le menu, suite à des demandes mais je voudrai encore tout concentrer.
Il me reste des points bloquants
Pouvez-vous me dire comment mettre le menu à l'extrême gauche et le menu à l'extrême droite pour n'avoir qu'une seule ligne
https://cochanger.eu/organisation/association-collectif ?
sans bien sûr diminuer la taille des caractères.

J'ai essayé , sans succès, entre autres les float sur les éléments
#mod-custom136 => left
.moduletable => right

<div id="mod-custom136" class="mod-custom custom">></div>
<nav class="moduletable " aria-label="Main menu fr-FR"></nav>

Modifié par HDcms (21 Mar 2023 - 18:42)

Bonsoir
Encore simple et élégant.
Super
Merci

J'ai mis au final juste la modif

.container-header .container-nav {
        flex-wrap: nowrap;
}

1/ Par contre, je suis obligé d'ajouter

#mod-custom136{
  margin-top: 10px;
}

si je veux a peu près aligner le logo texte et le menu.
Est-ce qu'il y a un moyen de centre verticalement les 2 pour qu'il soit parfaitement aligné?

2/ Et question subsidiaire, quand un membre se connecte, cela ajoute un item de menu, amis du coup à priori cela va passer à la ligne si on ajoute encore un item dans ce menui.
Est-ce qu'il ay aurait encore une astuce en dehors de diminuer la taille et l'espace entre les items ? (je ne peux pas déborder à gauche et à droite en même temps??)

HDcms a écrit :

J'ai mis au final juste la modif

.container-header .container-nav {
        flex-wrap: nowrap;
}

Pour le coup avoir :

.container-header .container-nav {
        flex-wrap: wrap;
}
.container-header .container-nav {
        flex-wrap: nowrap;
}

C'est pas élégant du tout

HDcms a écrit :
1/ Par contre, je suis obligé d'ajouter

#mod-custom136{
  margin-top: 10px;
}

si je veux a peu près aligner le logo texte et le menu.
Est-ce qu'il y a un moyen de centre verticalement les 2 pour qu'il soit parfaitement aligné?

align-items : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

HDcms a écrit :
2/ Et question subsidiaire, quand un membre se connecte, cela ajoute un item de menu, amis du coup à priori cela va passer à la ligne si on ajoute encore un item dans ce menui.
Est-ce qu'il ay aurait encore une astuce en dehors de diminuer la taille et l'espace entre les items ? (je ne peux pas déborder à gauche et à droite en même temps??)

Agrandir le menu en augmentant la max-width comme suggéré ?

Bonjour
Je n'ai pas encore mis a résolu, car je ne suis pas sûr de mes dernières réponses
Est-ce possible de confirmer ou d'infirmer ? @_laurent ou autre personne
@+

Salut
Ok j'ai pu ajouter 3 items ce qui devrait suffire sinon je ferai autrement.
J'ai mis

.container-nav{
  max-width:none;
}

Merci
Modifié par HDcms (23 Mar 2023 - 15:00)

re
Ah non j'ai vérifié côté smartphone et j'ai un problème avec menu qui décale tout.
le menu se trouve complétement décalé
Certainement une modif que j'ai faite!
Voici la photo

Modifié par HDcms (23 Mar 2023 - 15:25)

Re
Bon je pense avoir compris ! ce serait peut-être dû au slogan et css appliqués ?
j'ai fait par tâtonnement/recherche pour trouver ce qui ne posait pas de problème sur une smartphone.

Avant ce qui fonctionnait sur un navigateur et pas sur un smartphone

HTML

<p><a class="acc" href="https://cochanger.eu/">CoChanger.Eu</a> <br />Se changer ensemble </p>

CSS

/* Logo/titre du site (hors page accueil) en texte avec lien sur la page accueil */
#mod-custom136 a.hors-acc {
	color: #fff;
	text-decoration: none; /* a supprimer si image */
	font-weight: 700;
	font-size: 2.2em;	
	font-family: "Lobster Two", Helvetica, "Trebuchet MS", Verdana, sans-serif;
}
/* Logo/titre du site en texte avec lien sur la page accueil */
#mod-custom110 a.acc {
	color: #fff;
	text-decoration: none; /* a supprimer si image */
	font-weight: 700;
	font-size: 3.2em;
	font-family: "Lobster Two", Helvetica, "Trebuchet MS", Verdana, sans-serif;
} 

En virant ces dernières lignes, je n'avais plus le menu qui se barrait à droite mais bien sûr j'ai
absolument besoin des mises en forme précédente. Je suis parti sur
HTML

<div><a class="acc" href="https://cochanger.eu/">CoChanger.Eu</a></div>
<div class="slogan">xxxxxxxxxxxxxxxxxxx</div>

pour peut-être mieux géré les 2 parties logo/slogan (surtout si le slogan est plus long que le logo!
CSS

@media only screen and (orientation: portrait) and (max-width: 500px){
	.slogan, .logo {
		
	}
}

J'essaie de "jouer" avec cela mais je ne suis arrivé à rien
Modifié par HDcms (23 Mar 2023 - 17:50)

Je te recolle mon précédent commentaire au cas ou tu ne l'aurais pas lu....

_laurent a écrit :
Et bien il te suffit d'enlever le flew nowrap dans une media-queries au meme breakpoint que l'apparition de ton menu mobile pour revenir a ton état précédent (le menu empilé).

Bonne soirée

HDcms a écrit :
Comme je n'y arrivais pas et que je savais que cela fonctionne avant que je ne retouche à l'en tête, j'ai d'abords supprimés le fichier user.css

D'où l'utilité de n'enlever que ce qu'on a rajouté pour le mobile

.container-header .container-nav {
     flex-wrap: wrap;
}
@media (max-width: 767.98px) {
     .container-header .container-nav {
        flex-wrap: wrap;
     }
}

Ou, de rajouter ce code seulement au dessus de la def mobile :

@media (min-width: 767.98px) {
     .container-header .container-nav {
        flex-wrap: nowrap;
     }
}

De cette façon le menu tombera naturellement sous le logo comme avant.

HDcms a écrit :
je ne connais pas bien cela (media-querie).

Ce sont les @média qui permettent de cibler un média précis (taille, orientation, device...)

HDcms a écrit :
C'est pour cela que je cherche maintenant à peut-être mettre le slogan à la ligne dans le cas du smartphone,

Le slogan est déjà à la ligne après le logo. Il est meme dans le meme conteneur que ton logo. Donc toucher au slogan n'aura aucun effet sur le menu.

Salut,

Je n'utilise que très rarement les autre mot clés. Je passe peut etre a coté de quelquechose important mais je m'en fiche un peu du média et de l'orientation, ce qui compte pour moi c'est la largeur dispo. Avec ton dernier exemple si c'est étroit mais en paysage ca ne s'appliquera pas donc c'est dommage. Il faut etre spécifique si ca répond a un besoin. La le besoin est juste sur la largeur. Voila pour mon humble avis

Bonne journée !