Die schwarze Admin-Leiste wird von Seitenelementen ausgeblendet

Plötzlich bemerkte ich beim Erstellen eines neuen WordPress-Theme, dass die schwarze Admin-Leiste durch das Header-Element ausgeblendet wird, wenn Sie nach unten scrollen, und ich kann es nicht beheben. Ich habe im Grunde eine volle Breite Header mit Elementen drin wie ein Logo und Navigation usw.

Wenn ich jedoch nach unten scrolle, wird die schwarze Verwaltungsleiste hinter die Kopfzeile geschoben, so dass Sie sie nicht sehen können, wenn Sie nach unten scrollen, bis das Kopfzeilenelement nicht mehr auf dem Bildschirm angezeigt wird. Das heißt, während Sie sich oben auf der Seite befinden, ist kein Administrator-Dropdown verfügbar.

Zuerst dachte ich, der Z-Index sei schuld, aber es ist viel trickreicher.

Die Admin-Leiste hat einen Z-Index von 99999. Das Header-Element hat einen Z-Index von 70. Ich habe den Header Z-Index von 70 auf 60 in den Entwicklertools geändert und dann nach unten gescrollt. Es funktionierte! Behoben. Also dachte ich. Wenn ich die Änderungen im CSS speichere und erneut hochlade und aktualisiere, kommt das Problem mit den neuen Werten zurück.

Das Herumspielen mit Dev-Tools funktioniert, aber sobald Sie die Seite erneut laden, wird das Problem erneut angezeigt. Ich kann niemanden finden, der das gleiche Problem hat, also frage ich mich, ob jemand helfen kann?

Solutions Collecting From Web of "Die schwarze Admin-Leiste wird von Seitenelementen ausgeblendet"

Die Stile für die Admin-Leiste werden in der Regel im Kopf der Website gedruckt. Daher wird der CSS-Code möglicherweise rückgängig gemacht, da die gedruckten Stile für die Admin-Leiste nach dem enthaltenen Stylesheet angezeigt werden.

Vielleicht können Sie mit der Aktion wp_head dies stoppen, indem Sie etwas in Ihre functionsdatei wp_head :

 function modify_admin_bar_css() { ?>  < ?php } add_action( 'wp_head', 'modify_admin_bar_css' ); 

Alternativ können Sie versuchen, die !important Deklaration in Ihrem CSS wie folgt zu verwenden:

 #wpadminbar { z-index: 99999 !important; } /* Plus any other styles you may need to add for the menu */ 

Beachten Sie jedoch, dass die Verwendung von !important in CSS nicht allgemein empfohlen wird, also sollten Sie dies immer sparsam verwenden.