• Hallo liebe Community,

    ich habe mich gefragt, wie ich die Hervorhebung eines individuellen Links im Menü entferne.
    Ausgangslage: Meine Webseitenstruktur ist vernetzt. So gibt es auf der Startseite, wenn man ein Stück scrollt die Überschrift „Über mich“. Für diesen Bereich habe ich in meine Menüleiste den Punkt „Über mich“ mit der CSS Klasse „#ich“ verankert.

    Aus UX Gründen habe ich im Customizer eingestellt, dass der Menüpunkt der aktuellen Seite farblich hervorgehoben ist. Nun ist mein Problem dass auf meiner Startseite sowohl der Menüpunkt „Startseite“ & „Über mich“ hervorgehoben. Letzteres möchte ich allerdings nicht hervorgehoben haben.

    Ich freue mich auf eure Anregung und Lösungsvorschläge.

    Beste Grüße
    syskidd

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Welche Form von Hilfe erwartest du denn jetzt?

    Vielleicht reicht dir ja als „Anregung und Lösungsvorschlag“ der Link zu diesem Thread: https://stackoverflow.com/questions/9979827/change-active-menu-item-on-page-scroll

    Ansonsten ist es etwas schwer, die fachlich nicht ganz korrekte Beschreibung ohne Blick auf die Webseite nachzuvollziehen. Leider hast du keine URL zur Website angegeben.

    Thread-Starter syskidd

    (@syskidd)

    Habe die Seite mal aus dem Wartungsmodus rausgeholt.
    Hier ist der Link http://akm-gmbh.info/. Hoffe das Problem mit meiner obigen Beschreibung nun eindeutiger ersichtlich.

    Das ist … schön.

    Nur sieht niemand, dass du den Menüeintrag „Über uns“ als current-menu-item aktiviert hast, wenn er auf dem Abschnitt „Über uns“ geht, weil das Menü nicht angeheftet („sticky“) ist. So sieht es nur wie ein Fehler aus, weil Startseite ebenfalls ein current-menu-item ist.

    Thread-Starter syskidd

    (@syskidd)

    In dem Customizer -> Header -> Menü habe ich eine Farbe für den aktuellen Menüpunkt eingestellt. Dementsprechend bekommt ja jeder „aktive“ Menüpunkt eine farbliche Hervorhebung.

    Auf meiner Startseite sind dann leider im Menü „Startseite“ und „Über uns“ hervorgehoben. Und das möchte ich für „Über uns“ nicht.

    Gibt es dazu konkrete Lösungsvorschläge, um das Problem zu beheben?

    Beste Grüße

    Du hast eine Hervorhebung eingetragen. Der Menüpunkt wird deshalb hervorgehoben. Das möchtest du aber nicht. Lösungsvorschlag um das Problem zu beheben? Trag die Hervorhebung nicht ein.

    Wenn du möchtest, dass auf einem Onepager beim Scrollen je nach angezeigtem Abschnitt ein anderer Menüeintrag als current-menu-item hervorgehoben wird, musst du die Zuweisung der Klasse zum Menüeintrag dynamisch per JavaScript vornhemen. Das macht aber nur Sinn, wenn das Navigationsmenü beim Erreichen des Abschnitts noch sichtbar ist. Das ist auf deiner Website aber auch nicht der Fall.

    Thread-Starter syskidd

    (@syskidd)

    Trag die Hervorhebung nicht ein.

    Das heißt dann ich bekomme auf keiner Seite den aktuellen Menüpunkt angezeigt.
    Die Einstellung betrifft doch das gesamte Menü. Habe es nicht einzeln für den Menüpunkt „Über uns“ eingetragen.

    Wir reden ganz doll aneinander vorbei.

    Im Moment sind im Navigationsmenü mehrere statische Seiten eingetragen. Rufe ich die Seiten auf, werden sie als aktive Seite im Navigationsmenü angezeigt.

    Du hast dann zusätzlich einen individuellen Link für einen Abschnitt auf der Startseite eingetragen. Rufst du die Startseite auf, werden beide Links (Startseite und Link zum Abschnitt Über uns auf der Startseite) als aktiv im Navigationsmenü angezeigt. Das ist auch richtig so, weil die aufgerufenen Seite gleichzeitig die Startseite ist und den Abschnitt abzeigt.

    Möchtest du, dass der Link zum Abschnitt Über uns erst dann als aktiv gekennzeichnet wird, wenn du zu diesem Abschnitt herunterscrollst bzw. ihn anklickst (und damit auch wieder zu diesem Abschnitt herunterscrollst), brauchst du eine Javascript-Funktion die diesen Zustand abfragt und bei Anzeige des Abschnitts dynamisch dem Link eine CSS-Klasse hinzufügt. Dazu habe ich dir einen Stackexchange-Thread angegeben, in dem in einer Demo gezeigt wird, wie sich im Navigationsmenü die als aktiv gekennzeichneten Menüeinträge beim Scrollen ändern. Das macht aber nur Sinn, wenn das Navigationsmenü auch dauerhaft sichtbar ist, also wie in der Demo angeheftet wird.

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Das Thema „Individueller Link im Menü „current_page“ Klasse entfernen“ ist für neue Antworten geschlossen.