Diminuer espace menu et améliorer aspect

Bonjour,
Je cherche à diminuer l'espace du menu principal en haut, car dans le cas ou tout les rubriques sont activées, cela fait un retour à la ligne du dernier élément
https://www.alterweb.info/fr/sites-web (site en cours de construction)
1/ Je pense que je dois faire un margin sur li mais comment faire sans impacter les autres menus alors que les id sont générés par le cms?

2/ pouvez-vous me communiquer des ressources pour améliorer le rendu , notamment au survol ou au soulignement (par exemple) d'un lien de menu actif ?
Merci

@+

Hello,

Plutôt que je jouer sur les espaces (qui poseront toujours des soucis sur des écrans de taille différente à la tienne), je pense que le mieux serait de jouer sur la structure globale (chez toi c'est ".container").

Actuellement, ton .container est bloqué à 1140px de large même sur grand écran en raison de la règle suivante :

@media (min-width: 1200px)
.container {
    max-width: 1140px;
}

Je propose dans un premier temps de modifier cette valeur par celle-ci (et à adapter si besoin) :

@media (min-width: 1200px)
.container {
    max-width: 1200px;
}
@media (min-width: 1400px)
.container {
    max-width: 1400px;
}

Bonjour,
Merci pour cette proposition.
Pour l'instant cela ne fonctionne pas (même avec un !important !) malgré le fait de vider le cache. je continue à chercher.
Par contre je souhaite des précisions
1/ pourquoi 2 valeurs 1200px, 1400px c'est pour que je choisisse celle qui me convient? ou c'est pour que ce soit l'écran au dessus d'une taille qui bascule dans une valeur ?
2/ celà impacte tout le site du coup, n'y aura t-il pas des effets collatéraux pour les tablettes, smartphones ?

Si toi ou autres personnes as des ressources pour améliorer le rendu html de la navigation (comme mentionnée), même dans quelques mois, je serai tjs preneur, car les extensions que je trouve sont plutôt moches ou pas ergonomiques du tout

Après vérification, ta règle problématique provient de Bootstrap



Rien ne t'oblige à passer par Bootstrap pour ce genre de choses, car c'est bien contraignant pour un gabarit aussi basique.
Modifié par Raphael (22 Sep 2020 - 12:06)

Par contre, il va être extrêmement difficile pour toi de gérer tes styles de page avec autant... de fichiers partout ! (sans compter la perte en web perf )

Merci pour cette investigation.
Et oui j'utilise un template plutot bien fait et flexible pour arriver a des modifications rapides mais effectivement avec plein d'effet de bords car c'est lui qui utilise boostrap
J'ai bien conscience qu'il y aura de l'optimisation, compression, cache à mettre plus tard mais je n'en suis pas là.
Je vais demander au dev' du template et si je n'y arrive pas, j'appliquerai le plan B de tronquer des mots (comme document) ou voir si je mets au singulier, bref de la bidouille pas non plus terrible pour le référencement
Cdt