WordPress: Menü-Eintrag nicht klickbar

Das Menü oben besteht aus einem Eltern-Eintrag („Berner Oberland“) und zwei Kinder-Einträgen („Flüsse“ und „Berge“). Der Elterneintrag, welcher selber keine Funktion haben soll, wird mit einem Fake-Link erstellt (#-Zeichen als Linkziel):

Unschön ist nun, dass sich der Mauszeiger auch beim Fake-Link zu einem Hand-Symbol wandelt, obschon der Link nirgends hinführt:

Mit CSS-Klasse das Aussehen des Mauszeigers ändern

Das Aussehen des Mauszeigers lässt sich mit einer CSS-Klasse ändern. Damit einem Menübefehl überhaupt eine CSS-Klasse zugewiesen werden kann, musst du die Option „CSS Classes“ bei den Menü-Optionen zuschalten:

Jetzt wechselst du im „Customizer“ in die Abteilung „Custom CSS“ (ganz unten). Da tippst du die folgende CSS-Klasse ein, wobei „nonclick“ ein frei wählbarer Name ist:

.nonclick > a:hover {
 cursor: default;
}

Nun geht es darum, diese neue CSS-Klasse dem Menübefehl mit dem Fake-Link zuzuweisen. Öffne dazu den gewünschten Menüeintrag und schreibe den Klassen-Namen bei „CSS Classes“ rein (Klick aufs Bild für vergrösserte Ansicht):

Das ist auch schon alles. Jetzt ändert der Mauszeiger seine Form nicht mehr, wenn er über dem Menüeintrag mit dem Fake-Link steht:

Wie gefiel dir dieser Beitrag?
Please wait...
Fragen oder Anregungen?
Zu den Kommentaren (10)
Passende Themen
Kommentare (10)

Schreibe einen Kommentar

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

  1. Monika vor 1 Woche

    Ist das Zufall- bei mir geht dies, indem ich das URL Feld einfach ganz leer lasse…… Beispiel: https://gruppe-elki.ch.

    Please wait...
    • Haeme Ulrich vor 1 Woche

      Hallo Monika.
      Clever, ohne Hash 🙂
      Nach meinem Test braucht du aber die CSS-Klasse, damit der Cursor sich nicht in einen Textcursor ändert, oder?

      Please wait...
    • Monika vor 1 Woche

      Ja, das stimmt. Hat bisher noch niemand bemerkt ;-).
      CSS Klassen sind elegant. Danke für die Anleitung, kann ja für vieles gebraucht werden, zB farbige Schrift für einzelne Einträge.

      Please wait...
    • Haeme Ulrich vor 1 Woche

      Danke dir für den Input mit dem Weglassen des Hash-Zeichens 🙂

      Please wait...
  2. Haris vor 1 Woche

    Wow, habe lange nach einer eleganten Lösung gesucht – und da ist sie 🙂 Vielen Dank für den Tipp!

    Please wait...
    • Marc Schilling vor 1 Woche

      Noch eleganter: Wenn man nur diesen CSS-Code verwendet, brauchst du nicht einmal eine CSS-Klasse vergeben. CSS prüft, ob der Link mit einem #-Zeichen beginnt, falls ja, wird der Cursor nicht verändert und bleibt default. Das ^ ist wichtig, damit nur #-Zeichen am Anfang verwendet werden. Enthält ein Link das #-Zeichen als Anker am Ende, soll der Cursor ja verändert werden, dort wollen wir den Pointer.

      a[href^=“#“] {
      cursor: default;
      }

      Grüße,
      Marc

      Please wait...
    • Haeme Ulrich vor 1 Woche

      Danke Marc, clever!

      Please wait...
    • Marc Schilling vor 1 Woche

      Sorry, einen Fehler muss ich korrigieren: Es muss ein $ sein, kein ^. Wir müssen das #-Zeichen am Ende suchen, nicht am Anfang, da der Ankertext ja auch mit dem #-Zeichen beginnt (#anker). So funktionierte es nun zufriedenstellend 🙂

      a[href$=“#“] {
      cursor: default;
      }

      Please wait...
    • Marc Schilling vor 1 Woche

      Noch ein Hinweis: Vorsicht beim CSS Kopieren hier aus den Kommentaren. Die Anführungszeichen sind die falschen. Sie müssen durch die „Standard-Gänsefüßchen“ ersetzt werden. Beim Schreiben werden sie hier umgewandelt.

      @Haeme: Vielleicht gibt’s ja ein Kommentarplugin zum Einfügen und Kopieren von (CSS) Code …

      Please wait...
    • Haeme Ulrich vor 1 Woche

      Das mit dem Code-Freundlichen Kommentieren nehme ich gerne in den Backlog, danke für den Input!

      Please wait...