[ad_1]
Man kann per CSS das Untermenü breiter machen. Da wir aber keinen Link zur Seite haben, können wir uns das nicht genauer ansehen.
Alternativ einen nicht verlinkten Untermenüpunkt Innenstadt anlegen und darunter dann die einzelnen Menüpunkte Altstadt, Burgplatz usw.
Du kannst unter Design > Menüs einen „Individuellen Link“ einfügen (1) und als URL # verwenden. Das ziehst du in das Menü rüber und entfernst dann auch noch das #-Zeichen (2). Ergebnis ist ein Platzhalter im Menü ohne eigene Verknüpfung. Darunter, eingerückt, ziehst du dann die Links zu den Stadtteil-Seiten (3).
(zum Vergrößern anklicken)
@pixolin
Aber ich vermute, dass @wortpressender38 bei einem Block Theme wie Twenty Twenty-Two den Navigations-Block verwendet.
Hier ein Beispiel im Zusammenhang mit einem Beitrag, den ich dazu gerade erstelle: Die Listenansicht (1) ist in jedem Fall ein hilfreiches Werkzeug beim Full Site Editing, um die richtige Stelle zu erwischen. Anschließend klickt man auf das Icon für Link (2). Dann wird ein Dialog für die Bezeichnung und den Link geöffnet, wo der Text für den Menüpunkt „Blog“ zunächst in „Beitragsübersichten“ geändert wird (3). Da das ein Oberpunkt mit weiteren Untermenüpunkten werden soll, ändern wir den Link auf „#“ (4). Damit wird verhindert, dass bei Anklicken des Menüpunktes eine Verlinkung geöffnet wird.
Ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):
Viele Grüße
Hans-Gerd
Noch besser, wenn der Link dann entfernt wird:
(zum Vergrößern anklicken)
Hi,
erstmal vielen Dank für die ausführlichen Antworten.
@pixolin: Ich verwende – wie @hage vermutet hat – den Navigations-Block im Block Theme Twenty-Twenty-Two. Den Dialog „Menüstruktur einfügen“ unter „Design“ gibt es dort nicht.
@hage: So ganz klar ist mir nicht, wie ein # als Link den Zeilenumbruch im Menü verhindern kann. Ich hab ein bisschen herumexperimentiert, aber leider erfolglos. Das Menü in Deinem Beispiel ist hauptsächlich horizontal orientiert. Die letzte Rubrik „Service“ hat einen vertikalen Unterbau. Werden mit Deiner Vorgehensweise (#) dort lange Linktexte der Untermenüs („So erreichen Sie uns…“, „Schnell, zuverlässig, kompetent…“ oder was das sonst so stehen könnte) nicht umgebrochen? Kannst Du gegebenenfalls mal einen Screenshot der ausgeklappten Menüstruktur einstellen?
Bei mir werden die Links immer als „individuelle Links“ dargestellt (Symbol, das wie ein beschriebenes Blatt aussieht). Kann der Zeilenumbruch – was ich mir eigentlich nicht vorstellen kann – damit zusammenhängen (bei Euch ist bei dem Beispiel Burgplatz das Logo ein Kasten mit einem Kettenglied)?
Hallo @wortpressender38,
sorry, meine Lösung bezog sich auf den Vorschlag von Bego, d. h. damit wird nicht der Zeilenumbruch im Menü unterbunden.
Bego hatte ja vorgeschlagen, stattdessen Untermenüs zu verwenden. Das wäre m. E. auch eine gute, wenn auch nicht in deinem Sinne optimale Lösung für das Problem.
Wenn du aber den Zeilenumbruch unbedingt verhindern möchtest, dann kann das per CSS erreicht werden.
Wenn du ein Plugin wie z. B. Customizer Export/Import installierst, steht dir der „alte“ Customizer zusätzlich zur Verfügung.
Dann kannst du unter Design > Customizer > zusätzliches CSS folgende CSS-Regel schreiben:
.kein_umbruch {
white-space: nowrap;
}Weitere Möglichkeiten für die Einbindung von dem „alten“ Customizer findest du in dem folgenden Beitrag von mir.
Diese Regel weist du dem Menüeintrag rechts in den Eigenschaften unter Erweitert > ZUSÄTZLICHE CSS-KLASSE(N) zu.
Das sollte dann funktionieren. Ob das allerdings auf allen Geräten funktioniert, müsstest du mal testen.
Viele Grüße
Hans-Gerd
Hallo Hans Gerd,
meine CSS-Kenntnisse sind leider ziemlich rudimentär.
Wenn ich Deine Anweisung richtig lese, erfolgt bei Leerstellen (white space) kein Umbruch sobald die Klasse .kein_umbruch vorhanden ist.
Das setzt voraus, dass die von mir zu definierende Klasse an den richtigen Stellen steht…. keine Ahnung wie man das macht 🙁
Ich habe mir den Quelltext angesehen und festgestellt, dass vor den Links eine class namens „wp-block-navigation-item__label“ (Beispiel: … <span class=“wp-block-navigation-item__label“>Innenstadt – Altstadtmarkt</span>…) steht.
Kann man diese class nicht für die Unterdürckung des Umbruchs im Navigationsmenü heranziehen?
Also
.wp-block-navigation-item__label{
white-space: nowrap;
und noch eine Anweisung um den Umbruch beim „-“ zu verhindern
}
Sind aber nur meine Laienhaften Vorstellungen 🙂
Hallo @wortpressender38
unter Design > Customizer > zusätzliches CSS gibst du die folgende CSS-Regel ein:
.kein_umbruch {
white-space: nowrap;
}Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):
Unter Design > Editor (beta) bearbeitest du die Navigation wie folgt (Beispiel)
Dann erscheint das Menue im Frontend wie folgt:
Viele Grüße
Hans-Gerd
- Diese Antwort wurde geändert vor 9 Stunden, 3 Minuten von . Grund: Code markiert
Vielen Dank… klingt auf den ersten Blick machbar. Werde mich morgen mal daran versuchen.
Unterdrückt „white-space: nowrap;“ nur den Umbruch bei Leerzeichen oder auch bei „-„, „/“ etc?
Unterdrückt „white-space: nowrap;“ nur den Umbruch bei Leerzeichen oder auch bei „-„, „/“ etc?
… das betrifft nur Zeilenumbrüche, siehe hier
OK… ich werde mal alle Anweisungen durchprobieren.
Hoffe, dass einer dabei ist, der auch bei „-“ den Zeilenumbruch verhindert. Notfalls nehme ich den Bindestrich (-) raus und nehme nur das Leerzeichen in den Linktext.