"Navbar" fest in der mobilen Ansicht?

Jochen

Hallo,

im Layout "Poster Responsive" bleibt die "Navbar" nicht feststehen in der mobilen Ansicht, sondern scrollt weg, obwohl diese in der normalen Desktopansicht feststehen bleibt.
Im Layout "Stripe Responsive" ist das hingegen besser gelöst, da dort die "Navbar" feststehen bleibt in der mobilen Ansicht.
Dort gibt es auch die Einstellmöglichkeit Hauptmenü > Allgemein > Scrollend > Ja oder Nein.

Meine Frage:
Könnte man dies im Layout "Poster Responsive" so ändern, das die Navbar auch in der mobilen Ansicht stehenbleibt?
Also durch ein Layoutupdate, denn ansonsten "verwirrt" das ganze ein wenig

Stefan S

Hallo Jochen,

meinst Du, die Leute, für die der Zustand des "Nicht Scrollens" in der Mobilen-Ansicht der gewohnte Zustand ist, wären durch so ein Layout-Update nicht verwirrt? Also wenn sich deren Website plötzlich anders verhält, als bisher… Da versuchen wir eigentlich immer, sehr vorsichtig zu sein und Überraschungen zu vermeiden.

Jochen

Ja schon, aber eigentlich ist es ja so nicht ganz richtig, wie ich finde!

Meine "Überraschung" war halt, das es in der normalen Ansicht feststeht und in der mobilen halt nicht.
Wenn man das mit anderen Layouts vergleicht ist das halt "komisch"

Dann bitte ich dich (wenn möglich) mir den CSS-Code dazu zu schreiben, bevor ich lange rumexperimentieren muss.
Oder eine Option dafür im Layoutdesigner einzubauen.

Stefan S

Jochen,

du hast natürlich recht. Ich muss halt nur überlegen, wie wir das machen können, ohne zu viel Überraschungen.

Ich denke, folgendes CSS sollte Dir bei Poster Responsive helfen:

CSS

<style>
.navbar{
	position: fixed !important;
	top: 0;
	left: 0;
}
</style>

Jochen

Hallo Stefan,

leider passt der Code noch nicht so ganz.

Es bleibt jetzt zwar die Navbar stehen, aber leider bleiben nun mit dem Code die Menüpunkte ausgeklappt und klappen nach dem auswählen nicht mehr ein in der mobilen Ansicht, so wie es vorher war.

Stefan S

Haste ne URL?

Jochen

Testseite hier: https://hosting.zeta-producer.com/4233547039/index.html

Info dazu: Ist als "OnePage" aufgebaut, also sprung auf Artikel auf der Startseite.
Das wird vermutlich noch das problem sein.

Ohne "OnePage" Aufbau, gehts das mit dem Code.

Aber, ohne den Code, geht das mit dem "wegklappen" des Codes auch auf der OnePage-Seite.
Nur bleibt da halt dann die Navbar nicht stehen...

Stefan S

Also ohne das CSS (respektive fixierte Navbar) klappt das Mobile Menü doch sicher auch nicht zu, sondern scrollt nur nach oben aus dem Bild oder? Nur um das Problem richtig zu verstehen…

Jochen

https://hosting.zeta-producer.com/4233661869/index.html

Auf dieser Seite, bleibt das Navimenü fest (mit deinem Code) und wenn man einen Menüpunkt auswählt, "verschwindet" das aufgeklappte Menü richtig.

-----------------------------------------------------------------------------

https://hosting.zeta-producer.com/4233547039/index.html

Bei dieser Seite, die als "OnePage" aufgebaut ist, bleibt zwar das Menü mit deinem Code nun feststehen, aber wenn man nun dort was auswählt, bleibt das aufgeklappte Menü stehen,
und klappt nicht mehr ein (weil das Menü vermutlich denkt, das man ja noch auf der gleichen Seite ist, was ja im gewissen Sinne auch stimmt).

-----------------------------------------------------------------------------

Und ohne den Code geht das mit dem "einklappen", aber die Navi bleibt nicht feststehen.
(Auch als OnePage aufgebau).
Siehe hier: http://postertest3.zeta-producer.com/index.html

------------------------------------------------------------------------------

Sorry und danke für deine Mühe

Stefan S

Hi,

auf postertest3.zeta-producer.com/index.html klappt in der mobilen Ansicht auch nichts ein, wenn man z.B. auf "Artikel 1" im Menü klickt (das war meine Frage), sondern das Menü scrollt ja nur nach oben weg.

Dein Hauptproblem hier ist also zunächst mal (unabhängig vom fixieren des Menüs), dass das Mobile Menü nur eingeklappt wird, wenn eine neue Seite geladen wird, aber nicht, wenn ein Menü-Eintrag angeklickt wird, der zu einem Artikel auf der bereits angezeigten Seite scrollt.

Stimmen wir soweit überein?

Jochen

Ja Stefan, so sind wir nun "synchron"
Hättest du da bitte bitte eine Idee dazu?

Stefan S

Ja, um das zu lösen brauchst Du auf jeder Seite noch ein kleines JavaScript. Am besten einfach in ein Attribut (footer_script) packen:

JavaScript

<script>
	$z("ul.nav a").click(function(){
		$z(".navbar .nav-collapse").removeClass("in").css("height","");
	});
</script>

Jochen

YEAH......Stefan, du bist der beste

Mit deinem CSS und JavaScript-Code, ist nun das gewünschte erreicht worden.

Vielen vielen Dank an dich!!!!!

Stefan S

Gerne. Das ist ja das mindeste, was wir für Dich tun können

Stefan S

Habe nun doch noch ein Online-Update veröffentlicht. Im Default ist das Menü nun auch auf kleinen Bildschirmen fixiert, dafür hat das Layout nun eine neue Layout-Einstellung "Hauptmenü > Allgemein > Scrollend" anhand derer man das Menü-Verhalten generell umschalten kann.

Das angepasste CSS zur Fixierung des Menüs kannst Du also nach dem Online-Update löschen. Das JavaScript (OnePager-Links) wirst Du noch brauchen.

Jochen

Hallo Stefan,

vielen Dank dafür!
Funktioniert einwandfrei

"Navbar" fest in der mobilen Ansicht?

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?