Une récente mise à jour a cassé ma barre de navigation supérieure — plus précisément, la barre se charge (elle est visible l’espace d’un instant), puis l’en-tête standard de Discourse se place au-dessus et la masque.
J’essaie de comprendre ce qui s’est exactement passé et/ou comment le corriger. Quelqu’un pourrait-il m’orienter dans la bonne direction ?
En inspectant la page dans le navigateur, j’ai constaté que l’ajout de
.d-header-wrap {
margin-top: 48px;
}
déplace l’en-tête vers le bas pour révéler la barre de navigation (qui mesure 48 px de hauteur), ce qui semble avoir résolu le problème.
Cependant, je ne suis pas certain que ce soit une solution durable, et je reste curieux de savoir exactement ce qui s’est produit.
de mon composant afin d’éliminer l’espace blanc supplémentaire apparu sous l’en-tête. Ce code fonctionnait parfaitement depuis des années, je suis donc curieux de savoir ce qui a provoqué cette rupture…
parce que cela ne semblait faire aucune différence.
Édition : Ce qui précède s’applique au CSS pour ordinateur de bureau. Sur mobile, je n’ai pas eu besoin d’augmenter la valeur Z de la barre de navigation.
Ce changement résout certains petits problèmes que nous rencontrions avec l’en-tête depuis la création de Discourse… fonctionnellement, cela signifie que l’en-tête n’est plus dans une position fixe (et sans lien avec la position des autres éléments de la page), mais fait désormais partie du flux naturel des éléments de la page… c’est pourquoi le padding et la marge de #main-outlet ne sont plus nécessaires.
Lorsque le changement a été initialement appliqué, il y avait un padding supplémentaire sur mobile dans le CSS par défaut, mais cela a été corrigé un jour ou deux plus tard… je suppose que vous avez mis à jour le jour entre le changement initial et la correction ; si vous mettez à nouveau à jour, le problème devrait disparaître (vous pouvez alternativement ajouter .mobile-view #main-outlet { padding-top: 0.25em; } si vous ne souhaitez pas mettre à jour à nouveau).
Votre correctif avec .d-header-wrap me semble durable.
Voir également Header Submenus - #103 by Mark_Schmucker. Je ne suis pas sûr que la solution durable proposée s’applique à cela, mais je pense qu’elles sont liées au même changement.
Je viens de passer à la dernière version (2.8.0.beta4) après plusieurs mois de négligence, et il semble que mon correctif n’était pas si durable (ou peut-être que le problème actuel n’est pas lié à ce correctif). Je travaille actuellement à comprendre ce qui s’est passé et je mettrai à jour ce fil dès que je saurai, mais si ce qui suit vous dit quelque chose, n’hésitez pas à me le faire savoir.
En gros, ce qui s’est passé est similaire à ce qui est décrit dans le message d’origine, sauf que cette fois ce n’est pas l’en-tête de Discourse qui couvre la barre de navigation supérieure \u003cstrike\u003e mais la barre de navigation supérieure qui couvre l’en-tête de Discourse \u003c/strike\u003e. (edit : je pense maintenant que l’en-tête n’est pas couvert, mais qu’il n’est tout simplement pas rendu). Lorsque je désactive le thème par défaut via le mode sécurisé, tout s’affiche correctement.
Curieusement, cependant, lorsque je navigue vers /admin/customize/themes/11/desktop/scss/edit, l’en-tête de Discourse et la barre de navigation supérieure s’affichent correctement (à la fois en mode sécurisé et en mode normal). Je pense que la raison pour laquelle il n’y a pas de différence entre le mode sécurisé et le mode normal sur la page du thème est que le mode sécurisé ne s’applique pas à certaines pages d’administration. Mais ce que je ne comprends pas, c’est pourquoi tout s’affiche correctement sur les pages d’administration mais pas ailleurs.
Une autre chose que je ne comprends pas : lorsque j’accède au site sur mon mobile, il s’affiche également correctement, même lorsque je demande explicitement la version bureau…
Je vais enquêter plus avant, mais j’apprécierais toute suggestion ici.
Edit : Voici ce que je vois lorsque j’inspecte une page publique (en mode normal) :
