"Navbar" fest in der mobilen Ansicht?

  • 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 ;)

  • 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.

  • 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.

  • 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>
  • 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.

  • 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…

  • 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 :thumbup:

  • 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?

  • 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>
  • YEAH......Stefan, du bist der beste :thumbup:


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


    Vielen vielen Dank an dich!!!!!

  • 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.