JoomlaCamp 2018 Essen - 03.02.2017 in Essen

Menü/Navigation verschwindet in der mobilen Ansicht / mobil nicht responsiv?

    Menü/Navigation verschwindet in der mobilen Ansicht / mobil nicht responsiv?

    Hallo liebe Joomla-Gemeinde,

    ich bin gerade am verzweifeln ?( (wahrscheinlich der Grund warum hier die meisten schreiben ;) )

    ich habe für eine Grundschule eine homepage erstellt, die (wie immer) nicht viel kosten soll und zudem von den Lehrer selbst bearbeitet werden kann.

    Dazu habe ihc mich vor einigen Wochen für das Template von Joomlaos.de "Otrepelt Free" entschieden. (Das Template ist anscheinend nur erstellt wurden, um zu einer Werbe-Seite zu kommen. Habe mich abert jetzt leider trotzdem wochenlang damit rumgequält...)
    Alles ist jetzt soweit eingerichtet, Inhalte von den Lehrern gefüllt und diese auch zufrieden und nun beim Online-Stellen ist mir erst aufgefallen, dass in der mobilen Version keine Navigation mehr da ist.

    hier ein Link zu der Seite: grundschule-dingelstaedt.de/

    Von php habe ich leider gar keine Ahnung, auch wenn ich schon oft versucht habe die index.php zu verstehen.
    Leider ist die Template-php-struktur sehr abweichend vom Standart-Protostar, das macht es mir noch schwerer das zu verstehen.

    Die web-entwickler-konsole gibt die Warnung: "Stil-Dokument konnt nicht geladen werden..."
    Gibt es da einfach nur einen Fehler in der index.php?
    Und muss ich hier die mobile Version komplett neu schreiben (was ich leider noch niiie gemacht habe)?


    Ich bitte um Hilfe oder Tips.

    Kann mir jemand helfen???
    Doch, es ist responsiv, aber es ist kein Mobilmenü im Template integriert.

    Erst mal als Notlösung: Ganz am Ende der template.css eintragen:

    Quellcode

    1. /* So lange noch kein Mobilmenü integriert */
    2. body #nav
    3. {
    4. display: block !important;
    5. }
    6. #hor_nav.span12
    7. {
    8. float: left !important;
    9. }


    Dann verschwindet das Menü wenigstens nicht.

    Joomlaos wird zunehmend mehr mit solchen Templates zugeballert. Du hast wenigstens noch eines erwischt, das responsiv ist. Oft ist das, was man runterlädt so weit abgespeckt, dass man gleich hätte drauf verzichten können. Gelegentlich führt der Link auf asiatische Seiten zur sog. Pro-Version, die man dann kaufen kann. Natürlich ohne jeglichen Support oder Rückgaberecht u.ä. Unterm Strich sind diese Pro-Templates aber auch zu 90% "geklaut" und ihr Geld nicht wert.
    Bei dir jetzt halt plump eine Verkaufsseite.
    Joomla-Fachmann: ghsvs.de
    Vielen Dank soweit schon mal.

    In der bootstrap.css fand ich ebenfalls den Befehl, der das Menü zum verschwinden gebracht hat :

    @media (max-width:767px){
    /*#nav{display:none !important;*/} --> mit dem ausklammer konnte ich mir das Menü schon wieder holen. Sieht aber so nicht sauber aus.

    Könnte ich ein responsives Menü jetzt mit einem jquery - Plugin erstellen??
    Hilfreich!
    Bitte ändere nichts in den bootstrap-Core-Dateien. Man überschreibt in solchen Fällen in nachfolgenden CSS-Dateien. Außerdem ist in meinem Code noch mehr berücksichtigt.

    So kannst du ein Mobilmenü mit Bootstrap-Hausmitteln einrichten:

    PHP-Quellcode

    1. <div id="navigation">
    2. <div id="nav" class="<?php echo $var_resp_class; ?>">
    3. <div id="hor_nav" class="<?php echo $var_resp; ?>12">
    4. <?php echo $hornav; ?>
    5. </div>
    6. <div class="clear"></div>
    7. </div>
    8. <div class="clear"></div>
    9. </div>
    10. <!--EINSETZEN START-->
    11. <nav class="navigation mobile-navigation">
    12. <div class="navbar pull-left">
    13. <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
    14. <span class="element-invisible"><?php echo JTEXT::_('TPL_PROTOSTAR_TOGGLE_MENU'); ?></span>
    15. <span class="icon-bar"></span>
    16. <span class="icon-bar"></span>
    17. <span class="icon-bar"></span>
    18. </a>
    19. </div>
    20. <div class="nav-collapse">
    21. <?php echo $hornav; ?>
    22. </div>
    23. </nav>
    24. <style>
    25. @media (min-width:768px)
    26. {
    27. .mobile-navigation
    28. {
    29. display: none;
    30. }
    31. }
    32. </style>
    33. <!--EINSETZEN ENDE-->
    34. <div id="content">
    35. ... usw. ...


    Füge den Block <!--EINSETZEN START--> bis <!--EINSETZEN ENDE--> in der index.php ein.
    Entferne die gemachten Änderungen aus obigen Posts wieder.

    Wenn du lieber selber was basteln willst, vielleicht das Slicknav-Menü. Ist aber mehr Aufwand das in Joomla zu integrieren.
    Joomla-Fachmann: ghsvs.de
    Du bist mein Retter Re:Later!!!
    Vielen lieben Dank!

    Die Änderungen in den core-Dateien habe ich alle wieder rückgängig gemacht (ich hatte auch eine Sicherungskopie). Bisher habe ich meine Tests und Versuche auch nur lokal auf einer Kopie auf meinem Rechner getätigt - ich will ja die laufende Homepage nicht zerstören :rolleyes: .

    Verstehe ich das richtig, dass du in der Php jetzt auf das responsive Menü des protostar_templates verweist?

    Re:Later schrieb:

    <style>
    @media (min-width:768px)
    {
    .mobile-navigation
    {
    display: none;
    }
    }
    </style>


    Und ist es jetzt sinnvoll ab dem Style-Tag (s.o.) in der Template.css das responsive Menü weiter zu einem ausklappbaren Menü auszubauen??

    @Elwood: ja, diese Seite werde ich wohl in Zukunft meiden. Interessant, das du das Template im Original gefunden hast. Mir war das nicht gelungen...
    Weißt du, ob es dort funktioniert. Obwohl ich ja jetzt echt froh bin, hier die responsive Lösung gefunden zu haben, hatte schon befürchtet ich muss alles neu machen...

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „lisa“ ()

    Du kannst das CSS auch am Ende der template.css einsetzen. Musst allerdings bisschen aufpassen, da das Konstrukt auch Bootstrap-Klassen und -Anweisungen enthält, von denen man besser die Finger lässt, weil sie an ganz anderer Stelle auch vorkommen könnten. Deshalb habe ich auch die Klasse mobile-navigation hinzugefügt, damit man alles spezifischer ansprechen kann.

    CSS direkt im Seitenquelltext hatte hier für mich den Vorteil, dass meine Anweisungen mit höchster Priorität in der CSS-Hierachie gezogen werden und ich nicht lang rumprobieren musste.
    Joomla-Fachmann: ghsvs.de

    Elwood schrieb:

    wer weiß, wer diesen chinesischen Werbe-Link bei joomlaos hinterlegt hat

    Der befindet sich auch auf der Seite nach Install. Hat TE aber entfernt. Als Komplett-Verarsche prangt dann erst mal im Kopf aller Seiten in fetten Lettern "author footer link can be edited or disabled only in full version". Egal. Lohnt einfach nicht, aktuellere Templates bei joomlaos zu laden und ältere ja sowieso nicht.
    Joomla-Fachmann: ghsvs.de

forum.joomla.de is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.