Salut tout le monde.
J’ai ajouté les codes ici aux champs requis, mais cela n’a pas fonctionné. Où est mon erreur ?
J’ai aussi essayé le plugin, mais il casse la zone de la barre de recherche.
Salut tout le monde.
J’ai ajouté les codes ici aux champs requis, mais cela n’a pas fonctionné. Où est mon erreur ?
J’ai aussi essayé le plugin, mais il casse la zone de la barre de recherche.
hmmm, oui, je soupçonne que vous allez devoir faire un travail supplémentaire en CSS pour que la barre d’en-tête fonctionne avec les liens.
Question, développez-vous aussi pour mobile ? Car l’en-tête sur mobile a beaucoup moins d’espace pour ajouter des choses. Vous ne voulez pas faire un beau site de bureau pour découvrir ensuite que votre vue mobile est désordonnée.
Je ne me souviens pas, mais il pourrait aussi y avoir une sortie de plugin que vous pouvez utiliser. ![]()
Salut Lilly.
Je veux faire ça uniquement pour le bureau.
La vue mobile est correcte maintenant, je ne veux pas réduire la zone d’en-tête là-bas.
Si cela n’arrive pas d’ailleurs, ce n’est pas grave. Ce bouton redirigera vers une catégorie de forum.
Je voulais juste que ce bouton donne une belle atmosphère.
Voulez-vous dire une icône dans cette zone, par exemple ?

Pouvez-vous préciser ce que vous recherchez exactement ?
La sortie de plugin ici dans cette zone est before-header-panel.
Ceci est utilisé par les composants Custom Header Links et Header Search.
Custom Header Links est la voie à suivre !
Comme Lilly l’a indiqué, vous devrez ajuster le CSS ici.
D’après ce que je vois, le composant Header Links utilise du CSS sur le conteneur de sortie, ce qui peut expliquer pourquoi il casse la recherche.
Si cela ne vous dérange pas, pouvez-vous réactiver le composant pour que je puisse regarder directement votre forum ?
C’est expliqué ici, mais quand j’écris les codes nécessaires, ça ne fonctionne pas.
Je l’ai activé maintenant vous pouvez regarder, merci pour votre aide ![]()
Merci !
Essayez d’ajouter ce CSS :
.floating-search-input-wrapper .floating-search-input {
margin: auto;
}
Lorsque j’utilise ce code, il s’affiche normalement pour l’utilisateur anonyme. Mais il ne s’affiche pas normalement pour l’utilisateur connecté. La raison est le code que j’ai utilisé pour centrer la barre de recherche.
Je suis connecté et cela s’affiche comme prévu. Je vois la recherche centrée. Regardez ma capture d’écran. ![]()
Oui, il a ajouté manuellement margin-right: -35px; pour compenser le panneau des en-têtes, et maintenant, avec le lien, la valeur doit être ajustée à nouveau.
La raison pour laquelle je fais cela est que la barre de recherche ne bouge ni à gauche ni à droite pour le membre connecté. La barre de recherche reste au même endroit avant et après votre connexion.
Mais il semble que cela affecte également le plugin Custom Header Links. Je pense que je ne mettrai pas de bouton là pour l’instant. Si nous pouvons l’ajouter avec du CSS et du HTML, j’aimerais essayer.
Merci de prendre du temps. ![]()
Vous pouvez également faire en sorte que la barre de recherche sorte du flux avec une position absolue.
Vous n’aurez plus besoin de margin.
.floating-search-input-wrapper {
position: absolute;
left: 0;
top: calc((4em - 2.6rem - 2px - 2px) / 2); /* hauteur de l'en-tête - hauteur de la recherche - marge - bordure */
width: 100%;
}
Vous devrez peut-être ajouter une media query pour contrôler la largeur sur une résolution plus faible et vous assurer qu’elle ne chevauche pas d’autres éléments.
C’est super, merci beaucoup, je vais contrôler/vérifier. ![]()
Mais, quand j’active les liens d’en-tête personnalisés, la section d’en-tête n’a pas l’air normale.
Ce n’est pas un gros problème. Je voulais juste ajouter quelque chose visuellement à la section d’en-tête.
Salut @Arkshine Je viens de réaliser. Après ce code, le logo ne peut plus être cliqué.
Je pense que c’est lié au code position: absolute;.
Vous pouvez ajouter ce CSS pour que le logo s’empile au-dessus de la recherche.
.home-logo-wrapper-outlet {
z-index: 1;
}
Vous avez une autre solution avec le CSS floating-search-input pour éviter de traiter les côtés (assurez-vous de supprimer le CSS sur floating-search-input-wrapper) :
.floating-search-input {
position: absolute;
left: 0;
transform: translateX(calc(50vw - (33rem / 2)));
}
Merci beaucoup Arkshine ![]()