Link in Navigation wird umgebrochen

Gelöst wortpressender38
(@wortpressender38)

vor 2 Jahren

Ich (WP-Anfänger) bin dabei, auf Basis des Themes Twentytwentytwo eine Webseite zu bauen.

Im Navigationsmenü erfolgt bei längeren Menüeinträge (Links) ein Zeilenumbruch.

Satt

„Innenstadt – Altstadt“ (eine Zeile) wird es als

„Innenstadt –
Altstadt“ (zwei Zeilen)

dargestellt, siehe Screenshot in folgender Datei:

http://abload.de/img/2022-10-1111_48_51_naizcfm.png
Im Editor sieht es so aus:
http://abload.de/img/2022-10-1111_52_42-nam1e5z.png

Durch den Umbruch wird das Menü sehr lang und unübersichtlich/schlecht lesbar.
Gibt es eine Option mit der man den Umbruch abschalten kann?

Danke vorab für Tipps 🙂

Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 15 Antworten – 1 bis 15 (von insgesamt 15)

bscu
(@bscu)

vor 2 Jahren

Man kann per CSS das Untermenü breiter machen. Da wir aber keinen Link zur Seite haben, können wir uns das nicht genauer ansehen.

Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren

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)
Moderator Hans-Gerd Gerhards
(@hage)

vor 2 Jahren
@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
- Diese Antwort wurde geändert vor 2 Jahren von Hans-Gerd Gerhards.
Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren

Noch besser, wenn der Link dann entfernt wird:

(zum Vergrößern anklicken)

Thread-Starter wortpressender38
(@wortpressender38)

vor 2 Jahren

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)?
Moderator Hans-Gerd Gerhards
(@hage)

vor 2 Jahren
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
- Diese Antwort wurde geändert vor 2 Jahren von Hans-Gerd Gerhards.
Thread-Starter wortpressender38
(@wortpressender38)

vor 2 Jahren
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 🙂
- Diese Antwort wurde geändert vor 2 Jahren von wortpressender38.
Moderator Hans-Gerd Gerhards
(@hage)

vor 2 Jahren
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 2 Jahren von Hans-Gerd Gerhards. Grund: Code markiert
Thread-Starter wortpressender38
(@wortpressender38)

vor 2 Jahren

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?

Moderator Hans-Gerd Gerhards
(@hage)

vor 2 Jahren

Unterdrückt „white-space: nowrap;“ nur den Umbruch bei Leerzeichen oder auch bei „-„, „/“ etc?

… das betrifft nur Zeilenumbrüche, siehe hier
Thread-Starter wortpressender38
(@wortpressender38)

vor 2 Jahren
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.
- Diese Antwort wurde geändert vor 2 Jahren von wortpressender38.
Moderator Hans-Gerd Gerhards
(@hage)

vor 2 Jahren

Ich habe das gerade noch mal getestet: Die genannte CSS-Regel wirkt wohl auch bei Verwendung von einem Bindestrich, d. h. auch da erfolgt kein Umbruch.

Moderator Angelika Reisiger
(@la-geek)

vor 2 Jahren

Hallo @wortpressender38

du kannst es auch einmal mit geschützten Leerzeichen (per Tastatureingabe) versuchen.

InnenstadtALT-Taste+0160–ALT-Taste+0160Burgviertel

Das geschützte Leerzeichen ist die Tastenkombination ALT + 0160
in Windows. Für Linux, Mac etc. siehe dort (mittlere Spalte)
https://de.wikipedia.org/wiki/Gesch%C3%BCtztes_Leerzeichen#Darstellung_auf_Computersystemen

Thread-Starter wortpressender38
(@wortpressender38)

vor 2 Jahren

Moin,

hat mit dem Customizer plugin geklappt – ging viel einfacher als befürchtet 🙂

Danke nochmal an alle für den schnellen Support.

Moderator Hans-Gerd Gerhards
(@hage)

vor 2 Jahren

super – freut uns. Danke für die Rückmeldung und “Gelöst”-Markieren. 👍