Responsive Menüleiste bei capacity fixieren

wisi01 · 07.04.2025 12:45:51

Hallo Leute!
Ich stehe leider wieder mal an einem (für mich nicht unbedingt neuen wink ) Problem:
Bin grade dabei das Template „capacity“ für einen kleinen Hobbyfußballverein einzurichten. Funktioniert soweit alles, allerdings stört es mich ein wenig, dass bei der responsiven Navigation die Menüzele (also eigentlich der Button über den das seitliche Menü dann aufgerufen wird) beim scrollen nach oben rutscht und somit aus dem Bildschirm verschwindet.

In der „Desktop-Ansicht“ bleibt die Menüzeile oben stehen und kann jederzeit rasch und einfach erreicht werden. In der Mobile-Ansicht funktioniert dieses Verhalten nicht.

Hab schon versucht in der Datei stellarnav.css den Wert „position: sticky; top: 0;“ einzufügen, aber wohl nicht ganz an der richtigen Stelle…
Kann mir vielleicht jemand einen Tipp geben um den Menübalken auch am Smartphone oben festzunageln?

Vielen Dank schon mal im Voraus!
LG wisi

florian · 07.04.2025 13:08:28

It's not a bug, it's a feature...
In der templates/capacity/stellarnav.js, Zeile 100

if(width >= breakpoint) {

das sorgt dafür, dass das eingebaute Stickigkeitsscript nicht in der Smartphoneansicht anspringt.
Versuch mal, das rauszunehmen, also diesen Bereich

// Makes nav sticky on scroll
if (settings.sticky) {
	navPos = nav.offset().top;
	if(width >= breakpoint) {
		$(window).on('scroll', function() {
	 if ($(window).scrollTop() > navPos) {
		 nav.addClass('fixed');
	 }
	 else {
		 nav.removeClass('fixed');
	 }
	});
	}
}

ändern zu

// Makes nav sticky on scroll
if (settings.sticky) {
	navPos = nav.offset().top;	
		$(window).on('scroll', function() {
	 if ($(window).scrollTop() > navPos) {
		 nav.addClass('fixed');
	 }
	 else {
		 nav.removeClass('fixed');
	 }
	});
}

wisi01

wisi01 · 07.04.2025 14:54:55

Hallo Florian,
erst mal vielen Dank für den wie immer prompten Support. Einfach spitze! thumb_up

Leider hat die Änderung der stellarnav.js nicht den gewünschten Erfolg gebracht.
Ich habe jedoch zuvor schon festgestellt, dass die Menüleiste sehr wohl oben angepinnt bleibt wenn ich in der Datei stellarnav.css in Zeile 102 den Wert

 „.stellarnav.mobile.fixed { position: static; }“

ändere bzw. ergänze zu

„.stellarnav.mobile.fixed { position: sticky; top: 0; }".

Allerdings bleibt die Menüzeile nur kurz angepinnt und verschwindet dann etwas später. yikes Mit meinen doch eher bescheidenen css-Kenntnissen vermute ich, dass es irgendwie mit dem <body>-Bereich zusammenhängt…

Die Änderung der Datei stellarnav.js hatte bei mir, wie angeführt leider keine Auswirkung.

wisi01 · 07.04.2025 15:26:37

Heureka - ich glaub ich hab's! smile
Hab jetzt nochmals die von Florian angeführte Änderung an der Datei stellarnav.js vorgenommen und zusätzlich in der Datei stellarnav.css in Zeile 102 den Wert auf

.stellarnav.mobile.fixed { position: fixed; }

geändert. Und was soll ich sagen: es funktioniert! (auch wenn ich nicht weiß warum angel )

Nochmals Danke für die rasche Hilfe!

florian

WBCE CMS Forum

Announcement

#1 07.04.2025 12:45:51

Responsive Menüleiste bei capacity fixieren

#2 07.04.2025 13:08:28

Re: Responsive Menüleiste bei capacity fixieren

#3 07.04.2025 14:54:55

Re: Responsive Menüleiste bei capacity fixieren

#4 07.04.2025 15:26:37

Re: Responsive Menüleiste bei capacity fixieren

Board footer