Un utilisateur a demandé 👇
bonjour les connaisseurs
J’ai besoin d’aide pour réduire la hauteur de ma barre de navigation de menu, elle a un espace supplémentaire qui n’a pas l’air bien. Peux-tu m’aider s’il te plaît ??
Merci
(@bcworkz)
il y a 1 an, 11 mois
Vous devez remplir en ajustant différentes dimensions pour tout rétrécir ou grossir. Titre du site, sélecteurs .els-header .els-logo. Les éléments de menu eux-mêmes, les sélecteurs .els-main-menu li. Et la zone des icônes, sélecteur .els-icon. Ajoutez ces règles de violation SEC dans le panneau SEC Extra de l’adaptateur.
L’inspecteur d’éléments utilise les outils de développement de votre navigateur pour essayer différentes valeurs de rembourrage afin de trouver la hauteur et le placement corrects à l’intérieur.
(@vallujain)
il y a 1 an, 11 mois
Salut BCworkz,
merci pour votre réponse, je suis nouveau dans ce domaine, pouvez-vous s’il vous plaît copier et coller le code dans ma section css personnalisée ?
(@vallujain)
il y a 1 an, 11 mois
Re-bonjour,
J’ai écrit le code ci-dessous, mais l’espace n’a pas diminué …..
.els-main-menu li {pad-top : 5px ; arrière-plan rembourré : 5px ; } .els-icon {pad-top : 5px ; arrière-plan rembourré : 5px ; } .els-header { pad-top : 0px ; arrière-plan rembourré : 0px ; } .els-logo { pad-top : 0px ; arrière-plan rembourré : 0px ; }
Pouvez-vous me dire comment réduire la marge ?
Merci
(@vallujain)
il y a 1 an, 11 mois
Re-bonjour,
J’ai essayé un nouveau code ci-dessous et j’ai pu modifier la hauteur simplement en supprimant le badge, pouvez-vous m’aider à le réparer ?
.els-main-menu li {hauteur : 20 px ; haut rembourré : 5 px ; arrière-plan rembourré : 5px ; } .els-icon { hauteur : 20 px ; haut rembourré : 5 px ; arrière-plan rembourré : 5px ; } .els-header { hauteur : 20px ; } .els-logo { hauteur : 20 px ; }
(@bcworkz)
il y a 1 an, 11 mois
On dirait que vous avez appris un peu de CSS 🙂 Malgré un manque total de succès, vous vous en sortez bien jusqu’à présent.
À partir de la publication la plus récente de la SEC, modifiez chaque hauteur à 40px pour s’adapter à la hauteur du logo, sauf si vous avez l’intention de le faire déborder dans la zone ci-dessous.
Avec un logo .els, ajoutez des règles de rembourrage et un haut de rembourrage en définissant la distance à 0 (pas d’unité de mesure car px nécessaire pour 0). La chose la plus importante est d’ajouter cette règle à .els-logo : margin-top: -5px;. Cette règle gère mieux la position verticale du logo. Nous pouvons avoir des marges négatives mais pas de remplissage négatif.
Bien sûr, modifiez les valeurs de distance comme bon vous semble. S’il y a un autre contenu supplémentaire dans un CSS supplémentaire, ajoutez votre CSS à la fin. Si vous rencontrez toujours des difficultés pour appliquer une règle, vous pouvez essayer la !important modificateur à la fin de la règle. Par exemple:height: 40px !important;
Ce modificateur est considéré comme une mauvaise pratique et doit être évité, mais il peut être utile lorsque vous rencontrez des difficultés pour enfreindre une règle existante dont la source ne doit pas être modifiée.
Utilisez l’outil de développement de votre navigateur en mode émulateur mobile pour vous assurer que l’en-tête reste correct sur les appareils mobiles. Vous devrez peut-être ajouter des règles différentes aux téléphones portables. Pour appliquer les règles uniquement sur les petits écrans, nous utilisons des questions médiatiques. Ils ressemblent à ceci :
@media (min-width: 767px) {
/* small screen rules go here */
}Il n’est pas rare que certains d’entre eux soient disponibles pour différentes tailles d’écran, mais l’objectif est d’être aussi petit que possible. Essayez d’utiliser les spécifications de largeur que votre thème utilise déjà dans responsive.css. Des questions médias personnalisées peuvent également être posées dans le panneau CSS Extra.
(@vallujain)
il y a 1 an, 10 mois
génial : – comme ci-dessous, le code a parfaitement fonctionné sur grand écran, mais l’écran mobile est flou. .els-menu-principal li {
rembourrage supérieur : 15 px ; arrière-plan rembourré : 5px ;
} .els-icon { hauteur : 80px ! important; haut rembourré : 15 px ; arrière-plan rembourré : 5px ; } .els-header { hauteur : 90px ! important; haut rembourré : 0 ; arrière-plan rembourré : 0 ; } .els-logo {hauteur : 80px ! important; bordure supérieure : -15px ; haut rembourré : 0 ; arrière-plan rembourré : 5px ; }
Pouvez-vous nous aider sur le petit écran ? Ce qui doit être écrit dans @media (largeur minimum : 767px) {
}
(@bcworkz)
il y a 1 an, 10 mois
Peut-être quelque chose ? 🙂 Cela dépend de ce que vous voulez réaliser. J’ai quelques idées d’améliorations possibles, mais ce n’est pas ma place. Décrivez en détail ce que vous voulez réaliser. Notez également que vous aurez peut-être besoin d’une résolution pour un écran de 350 pixels différente de la résolution d’un écran de 767 pixels. L’icône du menu doit aller quelque part sans être surchargée.
(@vallujain)
il y a 1 an, 10 mois
Salut expert,
Merci pour votre réponse, en fait, après avoir ajouté quelques CSS supplémentaires, mon site ressemble à un ordinateur de bureau, mais lorsque j’ouvre le même sur mobile, seule la moitié de la bannière s’affiche et l’en-tête chevauche la bannière.
(@bcworkz)
il y a 1 an, 10 mois
Maintenant, je vois le chevauchement de ce dont vous parlez. Il n’apparaissait pas sur l’émulateur que j’utilisais, mais il est sur mon téléphone. Vous pouvez déplacer le drapeau vers le bas avec une règle comme celle-ci :
.home .vc_row.wpb_row {
margin-top: 50px;
}Comme d’habitude, ajustez le nombre comme vous le souhaitez. Cela peut affecter d’autres éléments de la page. Si c’est le cas, la meilleure solution consiste à ajouter un autre attribut d’identité ou de classe à cet élément qui est unique au drapeau. Utilisez l’attribut supplémentaire comme sélecteur CSS.
Cela mettra à l’échelle les images de la bannière pour s’adapter à la largeur disponible :
.els-prslr .els-prslr-img img {
height: auto;
width: 100%;
}(@vallujain)
il y a 1 an, 10 mois
bonjour l’expert
merci pour votre guide … si vous avez le code mis à jour comme ci-dessous, tout va bien après cela, mais encore une question … sur chaque page autre que la page d’accueil, la barre de titre chevauche mon en-tête et semble frustrante … pouvez-vous aider moi si c’est si bon
.els-prslr .els-prslr-img img { hauteur : auto ; largeur : 100 % ; } .els-menu-principal li {
rembourrage supérieur : 15 px ; arrière-plan rembourré : 5px ;
} .els-icon { hauteur : 80px ! important; haut rembourré : 15 px ; arrière-plan rembourré : 5px ; } .els-header { hauteur : 90px ! important; haut rembourré : 0 ; arrière-plan rembourré : 0 ; } .els-logo {hauteur : 80px ! important; bordure supérieure : -15px ; haut rembourré : 0 ; arrière-plan rembourré : 5px ; } .els-menu-principal li {
rembourrage supérieur : 15 px ; arrière-plan rembourré : 5px ;
} .els-icon { hauteur : 80px ! important; rembourrage supérieur : 15 px ; arrière-plan rembourré : 5px ; } .els-header { hauteur : 90px ! important; haut rembourré : 0 ; arrière-plan rembourré : 0 ; } .els-logo {hauteur : 80px ! important; bordure supérieure : -15px ; haut rembourré : 0 ; arrière-plan rembourré : 5px ; } Écran @Media only et (max-width : 600px) {.home .vc_row.wpb_row {margin-top : 70px ; }} Écran @media uniquement et (max-width : 768px) {.home .vc_row.wpb_row {margin-top : 70px ; }}
(@bcworkz)
il y a 1 an, 10 mois
Cela mettra la pression sur le contenu de la page superposée :
.els-titlebar-title.col-lg-5 {
margin-top: 50px;
}Comme d’habitude, ajustez le nombre comme vous le souhaitez. Je dois admettre que c’est une solution faible. Tant que les éléments ci-dessus restent les mêmes, tout ira bien. Quelque chose dans l’en-tête ne prend pas l’espace qu’il devrait, ce qui rend les autres éléments trop grands. La meilleure solution serait de résoudre ce problème, mais je n’ai aucune idée de la raison. Je compte sur un émulateur pour déterminer le CSS, qui est généralement très précis. Quand ce n’est pas le cas, je ne sais pas quoi faire, mais je propose des solutions faibles.
(@vallujain)
il y a 1 an, 10 mois
merci beaucoup pour votre travail au final 🙂
Cela a-t-il résolu votre problème ?
Was this helpful?
0 / 0