En tête et menu principal original et beau

Bonsoir
Je trouve que beaucoup d'en tête & menu principal d'un site fait avec des cms ne sont pas terribles.
Je voudrais réaliser un entête et menu principal plus "original" et "beau"
Problème j'y ai déjà passé des heures en essayant d'adapter des exemples ou en partant de zéro comme actuellement… sans succès

Voici le site en l'état qui n'est pas terrible:
https://cochanger.eu/autres/cochanger-eu
Pouvez-vous m'aider à réaliser cela en prenant par exemple https://codepen.io/kazzkiq/pen/qEMjaw/
Je n'ai d'ailleurs pas trouvé beaucoup d'exemple (ce qui serait peut-être une 1ère étape). N'hésitez pas à me conseiller des pages mentionnant ce type de menu

l'exemple pris, mais comme expliqué, je ne cherche pas à copier complétement. Un menu plus simple serait aussi bien apprécié.
L'idée étant d'avoir un
a) effet au survol du lien survol en changeant la couleur de fond (j'ai un effet parasite actuellement que je n'arrive pas à enlever)
b) mise en valeur du menu sélectionné avec la même couleur de fond
c) une couleur dégradé arrondie de l'en tête comme pour l'accroche actuelle avec la couleur dominante var(--cassiopeia-color-primary)

Patience ! Une chose à la fois. Je suis aussi passé par là. Moi non plus je n'aime pas les cms.
On va commencer par le a)
C'est quoi l'effet parasite dont tu parles ?
En a, tu veut changer la couleur du fond et en b avoir la même couleur que le fond (ou est la mise en valeur ?) Tu veux quoi exactement ?

Actuellement le passage au rouge ne rend pas terrible. Si je puis me permettre aussi il faudrait remonter tes textes de menu ou élargir la barre ainsi que faire un ombrage moins prononcé (genre gris au lieu de noir).

Bonjour
Je suis tout à fait d'accord. Les couleurs seront à finaliser avec quelqu'un qui a meilleur goût que moi (genre webdesign). Aucune couleur est figée. J'ai juste appris à utiliser la variable d'une couleur principale.

a) il y a un déplacement du texte du menu au survol, voir des fois un frétillement !

b) je souhaitai la même couleur de fond par simplicité, et le faire éventuellement évoluer par un autre effet (comme je l'ai dis, je n'ai ps vu vraiment de pages exemples en tête/menu en css (sans js)

c) oui certainement, il faudrait faire remonter le menu. En fait il est descendu quand j'ai essayé d'ajouter ce petit effet d'arrondi pour casser l'aspect rectangulaire
Je viens d'enlever ce que j'avais mis (en copiant sans trop comprendre ailleurs):

.container-header:after
{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.5rem;
	height: 1.5rem;
	width:100%;
	background-image: radial-gradient(farthest-side at top center, #777, #000, #fff);
	background-size: 100%;
	background-position: top;
	background-repeat: no-repeat;	
}

Salut,

Tu peux ajouter, pour pimenter (c'est juste un idée).
- menu sobre sans bandeau au départ, liens seuls sur fond de page. Apparition du bandeau au scroll, avec JavaScript. Ceci, afin que les liens soient plus lisibles le long de la page, si le menu est "fixed". Chez moi, au scroll, les liens changent aussi de couleur. Voici un exemple, qui m'a inspiré pour l'appartition du bandeau:
http://incasodi.colmar.it/fr/tignes.html
Tu n'est pas obligé d'utiliser le handburger, tu peux garder ton menu. L'avantage, c'est que la page d'accueil apparaît sans être polluée par un bandeau, surtout si il y a une belle image de fond.
Si tu te promène un peu sur le net, tu remarquera de nombreux sites de référence avec des menus minimalistes comme celui-ci.
Pour ton menu qui bouge au survol, fait une recherche "hover" dans le code, il doit y avoir une animation quelque part. Sinon, les CMS, c'est pas mon truc non plus.

lang="fr" avec du texte mélangé Anglais/Français ?

Bonsoir
@Bongota
Ton lien ne fonctionne pas!
je ne comprends pas "lang="fr" avec du texte mélangé Anglais/Français ?"!

@tous
Désolé mais j'ai fais une erreur, j'ai du restauré une version.
J'espère que c'est bon et je rappelle que j'essaie plutôt de m'approcher en adaptant les balises du https://codepen.io/kazzkiq/pen/qEMjaw/ avec les précisions mentionnées.

- Son lien fonctionne (au pire fait un copier collé)
- Il veut dire que tu indiques dans le html que la page est en français (fr) alors qu'il y a du contenu en anglais dedans
- C'est plus compliqué d'adapter un truc que tu n'as pas fait toi même (cms avec css dispersés et non explicites) que de pomper le truc qui te plait en l'adaptant à ton goût

Mon lien fonctionne, à l'instant !
Quand tu déclares la langue, si tu mets lang="fr" et que tu as du texte en Anglais dans ta page, ça passe s'il n'y a que quelques mots par ci par là, mais si l'Anglais est aussi conséquent ou plus que le Français, ce n'est plus valide. C'est ce que je vois sur le peu de texte que tu as.
ps : Plus rapide que moi Kerlutinoec !
Oui, c'est souvent la galère de prendre au vol un code que l'on a pas conçu, surtout un CMS, avec ses propres règles.
Modifié par Bongota (24 May 2022 - 21:35)

Il va falloir essayer de trouver dans tous ces CSS lequel contient "mod-menu", "mod-list", "nav" et "nav-item" !...