Navigation Block Breakpoint ist mit 600px zu schmal

white, brown, and black cat on brown wooden table

foto von tomas tuma auf unsplash

Wenn man nach X Jahren „Classic“ Themes in die Welt der Block-Themes eintaucht, wird man anfangs einiges vermissen. Darunter die Menüverwaltung und den Widgetbereich.

Die Menüverwaltung wird durch den Navigationsblock ersetzt. Den kann man beliebig oft einsetzen, und auch mit Untermenüs bestücken.

Der Widgetbereich wird abgelöst von Template-Parts für Header, Footer – und wenn man mag, auch Sidebar. In diesen Template-Parts kommen nun ebenfalls Blöcke zum Einsatz. Mit Hilfe von Zeilen, Spaltenlayouts, Gruppierungen und Verschachtelungen stehen Elemente zur Verfügung, die der Anordnung von Blöcken kaum noch Grenzen setzen.

Der Block-Editor ist nach wie vor nicht so weit, dass ich ganz auf Custom CSS verzichten kann. Und so hole ich mir erstmal (fast) immer das Customizer-CSS zurück:

add_action('customize_register',function ( $manager ) {}, 10, 1 );

In den Anfängen des Gutenberg-Editors hatte ich das eine oder andere Block-Plugin im Einsatz. Was sich mit WordPress-Boardmitteln machen lässt, setze ich mittlerweile bevorzugt damit um. So hat man später keinen Ärger mit ansteigenden regelmäßigen Kosten, Plugins die nicht mehr gepflegt werden, etc. etc…..

Was ich bisher am Block-Editor noch vermisse ist, Breakpoints festzulegen. Erst bei 600px die Haupt-Navigation auf mobile Ansicht umzustellen ist für meine Zwecke zu niedrig angesetzt. Das Menü sollte ja günstigerweise nicht breiter sein als der festgelegte Breakpoint, damit es nicht umbricht, bevor es auf mobile Navigation umstellt. Wenn das passiert, gibt das umgebrochene Menü kein schönes Bild.

In den Menüeinstellungen für das Hauptmenü ist festgelegt, dass bei Mobiles auf Overlay und Menübutton umgestellt werden soll.

screenshot 20221221 213935

Vielleicht wird man eines Tages auch Breakpoints in den Layout-Einstellungen bestimmen können (obwohl sie nicht als CSS-Variablen geführt werden können). Bis es eventuell so weit ist, lässt sich der Breakpoint des Menüs per CSS jedoch relativ einfach korrigieren. Den Wert 768px einfach durch den gewünschten ersetzen.

@media (min-width: 600px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
  		display: none;
	}
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
  		display: block;
	}
}


@media (min-width: 768px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {	
		display: block;
	}
	
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

weitere Beiträge zu:

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden. Die Angabe einer E-Mail-Adresse und eines Namens ist nicht erforderlich. Einen (Spitz)-Namen zu nennen wäre aber doch nett.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Hinweis: Sowohl angegebener Name als auch E-Mail-Adresse (beides ist optional, dafür werden alle Kommentare vor Veröffentlichung geprüft) werden dauerhaft gespeichert. Du kannst jeder Zeit die Löschung Deiner Daten oder / und Kommentare einfordern, direkt über dieses Formular (wird nicht veröffentlicht, und im Anschluss gelöscht), und ich werde das umgehend erledigen. – Mit hinterlassenen Kommentaren hinterlegte IP-Adressen werden nach zwei Monaten automatisch gelöscht

publicly queryable