Support » Themes » Link in Navigation wird umgebrochen

  • Gelöst wortpressender38

    (@wortpressender38)


    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)
  • 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).

    Screenshot Einstellungen
    (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):

    Navigations-Block

    Viele Grüße
    Hans-Gerd

    Noch besser, wenn der Link dann entfernt wird:

    Screenshot Einstellungen
    (zum Vergrößern anklicken)

    Thread-Starter wortpressender38

    (@wortpressender38)

    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

    Thread-Starter wortpressender38

    (@wortpressender38)

    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):
    Customizer

    Unter Design > Editor (beta) bearbeitest du die Navigation wie folgt (Beispiel)

    Navigation im Dashboard

    Dann erscheint das Menue im Frontend wie folgt:
    Navigation im Frontend

    Viele Grüße
    Hans-Gerd

    • Diese Antwort wurde geändert vor 1 Monat, 3 Wochen von Hans-Gerd Gerhards. Grund: Code markiert
    Thread-Starter wortpressender38

    (@wortpressender38)

    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

    Thread-Starter wortpressender38

    (@wortpressender38)

    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.

    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.

    Hallo @wortpressender38

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

    InnenstadtALT-Taste+0160ALT-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)

    Moin,

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

    Danke nochmal an alle für den schnellen Support.

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

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