Aktive Seite wird im Menü nicht angezeigt (Anchors)

  • robpere

    (@robpere)


    vor 7 Monaten

    Hallo,

    Ich weiß nicht, ob ich hier richtig bin, aber vielleicht kann mir jemand helfen. Ich habe eine Onepage Seite mit Ankern (Anchors) konfiguriert. Aber im Menü habe ich Verknüpfungen zu verschiedenen Seiten. Ich habe mit ElementsKit ein Menü konfiguriert mit der Option, dass ein aktiver Link schwarz sein soll. Im Menu habe ich individuelle Links erstellt mit #Anchor-Wert. Wenn ich auf der Onepage-Seite bin, funktionieren die Anker und es wird nur der Menü-Link schwarz, wenn ich mich an der betroffenen Stelle auf der Onepage befinde. Das funktioniert aber nur, solange ich auf dieser Onepage-Seite bleibe (www.robertopereira.ch/onepage).

    Wenn ich auf eine andere Seite gehe, z.B. http://www.robertopereira.ch/blog, funktionieren die Links mit Anchors nicht mehr, die Links reagieren nicht mehr und es passiert nichts, wenn man drauf klickt. Damit die Anchors gefunden werden, muss den Menü Link von #Anchor-Wert nach http://www.robertopereira.ch/onepage/#anchor-wert ändern.

    Nach dieser Anpassung funktionieren zwar die Links, aber die Farbe vom aktiven Link funktioniert nicht mehr. Wenn ich auf der /Blog Seite bin, geht das Menü, wenn ich auf der /onepage Seite bin, werden alle Anchor-Links schwarz, egal wo ich mich auf der Seite befinde.

    Gibt es eine Möglichkeit, damit nur der Link im Menü schwarz wird, wenn man in der Onepage an dieser Stelle ist?

    Danke schön,
    Roberto

    • Dieses Thema wurde geändert vor 7 Monaten von robpere.

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

Ansicht von 5 Antworten – 1 bis 5 (von insgesamt 5)
  • Moderator Michi91

    (@michi91)

    vor 7 Monaten

    Moin, bin leider nur wenig im Frontend unterwegs. Aber wenn ich richtig verstehe, hängt das Verhalten von der Konfiguration des Menüs ab? Wie wäre es wenn du zwei Menüs anlegst? Hilft das?

    Moderator Bego Mario Garde

    (@pixolin)

    vor 7 Monaten

    Sobald du einen Link wie http://www.exampel.com/onepage/#anchor-wert aufrufst, weist WordPress allen Navigationsmenüeinträgen die zur Seite onepage gehören die CSS-Klasse current-menu-item zu, die dann für die Farbänderung genutzt wird:

    .elementor-263 
.elementor-element.elementor-element-8565591 
.elementskit-navbar-nav 
> li.current-menu-item > a
rgb(0, 0, 0)

    Das heißt, das für die Färbung der Links nicht nach Anker, sonder nur nach (aktiver) Seite unterschieden wird.

    Das Problem wurde unter anderen hier besprochen, wobei eine (anscheinend funktionierende) Lösung war, das Plugin Page Scroll to ID zu nutzen. Probiert habe ich es nicht.

    Thread-Starter robpere

    (@robpere)

    vor 7 Monaten

    Hallo zusammen,

    Danke für den Input. Ich habe noch auf ElementsKit Pro aktualisiert, dort gibt es die Möglichkeit, für einzelne Seiten ein zweites Menü einzurichten. Leider funktioniert auch das nicht wie es sollte. Ich schaue jetzt mit dem Support weiter. Page Scroll to ID bringt auch nichts. Evtl. habe ich ein Theme oder Plugin welches Probleme macht. Falls ich die Lösung finde, werde ich es hier eintragen.

    Grüsse

    Moderator Bego Mario Garde

    (@pixolin)

    vor 7 Monaten

    Page Scroll to ID bringt auch nichts.

    Oh, schade. Wie gesagt liegt das Problem daran, dass du einen ganz anderen Mechanismus brauchst, um auf einem Onepager den gerade angezeigten Abschnitt in einem Navigationsmenü hervorzuheben. Da hilft dir kein zweites Menü.

    In diesem Thread wurde über das gleiche Problem diskutiert, wobei sich der Fragesteller mit einer eigenen JavaScript-Funktion behelfen wollte: https://wordpress.org/support/topic/highlight-active-menu-item-on-one-page/

    Vorschlag war, die jQuery-Bibliothek Gumshoe zu verwenden – eine gute Demo findest du unter https://codepen.io/cferdinandi/pen/aMvxKr
    Das in deine Website einzubauen ist aber nicht ganz trivial. Eine fertige Lösung (Plugin) fällt mir spontan nicht ein, obwohl es vermutlich etwas passendes gibt.

    s.wini

    (@swini-1)

    vor 6 Monaten, 3 Wochen

    Ich hab das mal mit dem code gelöst bekommen:

    #top-menu .current_page_item:not(.current-menu-item) a{
   color: white !important;
}

<script>
(function ($) {
	$(document).ready(function () {
		var menu_items_links = $(".nav li a");
		menu_items_links.each(function () {
			if ($(this).is('[href*="#"]')) {
				$(this).parent().removeClass('current-menu-item current-menu-ancestor');
				$(this).click(function () {
					var current_index = $(this).parent().index(),
						parent_element = $(this).closest('ul');
					parent_element.find('li').not(':eq(' + current_index + ')').removeClass('current-menu-item current-menu-ancestor');
					$(this).parent().addClass('current-menu-item current-menu-ancestor');
				})
			}
		})
	});
})(jQuery);
</script>

<script type="text/javascript">
(function ($) {
	$(document).ready(function () {
		var menu_items_links = $(".mobile_nav li a");
		menu_items_links.each(function () {
			if ($(this).is('[href*="#"]')) {
				$(this).parent().removeClass('current-menu-item current-menu-ancestor');
				$(this).click(function () {
					var current_index = $(this).parent().index(),
						parent_element = $(this).closest('ul');
					parent_element.find('li').not(':eq(' + current_index + ')').removeClass('current-menu-item current-menu-ancestor');
					$(this).parent().addClass('current-menu-item current-menu-ancestor');
				})
			}
		})
	});
})(jQuery);
</script>

    Vielleicht kannst du es dir ja anpassen.

Ansicht von 5 Antworten – 1 bis 5 (von insgesamt 5)
  • Das Thema „Aktive Seite wird im Menü nicht angezeigt (Anchors)“ ist für neue Antworten geschlossen.