Navbar manuell löschen

  • Hallo Zeta-Producer-Team,
    ich versuche nun schon seit Wochen das Layout meiner Homepage minimal anzupassen.
    Es geht um folgende Homepage: www.nutzrad-studio.de .
    Für das Layout ist die Navigationsleiste des Standard-Layouts „Clean Style“ für mich nicht ideal gewesen. Ich habe also eine eigene auf jede Seite neu eingefügt. Die vom Layout „gesetzte“ Navigation habe ich an das Ende der Homepage gebastelt, in dem ich alle Artikel darüber eingefügt habe.
    Die vom Layout „gesetzte“ Navigation habe ich jetzt formatiert, sodass sie „weiß ist“ und somit unten kaum zu sehen. Ein wirklich unbefriedigender Kompromiss. Ich würde sie gerne löschen!
    Ich habe schon vieles ausprobiert: Firefox Firefile oder Brackets. Das manuelle Löschen wird aber von Zeta logischerweise jedes Mal überschrieben.
    Ich wäre über eine schnelle Lösung ohne große Umstrukturierung sehr dankbar!
    Gerne auch an die hinterlegte e-Mail Adresse.
    Eine schöne Woche,
    Heidemann

  • Hallo Heidemann,


    zunächst würde ich dir empfehlen, auf die "Responsive" Variante deines verwendeten Layout zu wechseln.
    Du hast nch das Layout ohne "Responsiv" im Einsatz, und das ist nicht mehr zeitgemäss!


    Um die Navbar komplette zu "deaktivieren", kannst du folgendes machen:


    1: Das hier lesen: https://docs.zeta-producer.com/eigenes-css-einfuegen.html
    2: Dann im dortigen CSS-Feld, folgendes einfügen (ohne Zeilennummern):


    Code
    1. <style>
    2. #navbar {
    3. display: none;
    4. }
    5. </style>

    3: Mit OK bestätigen
    4: Die F6-Taste drücken, so das die Änderung übernommen wird.

  • Hallo Jochen, herzlichen Dank für die umgehende Rückmeldung und den guten Tipp. Hat binnen weniger Minuten perfekt funktioniert. Ich ärgere mich gerade massiv, nicht früher gefragt zu haben. Nun gut. Ganz glücklich bin ich jetzt noch nicht. Ich habe zwar den Tipp des responsive Designs beherzigt und angepasst. Die mobile Datenansicht ist aber chaotisch. Die Logo-Grafik reicht sogar über das Menü herüber. Wo kann ich die mobile Ansicht verändern / beeinflussen? Ich habe das bei den Layout-Eigenschaften nicht gefunden. Zweiter Punkt: die navbar ist nun nicht mehr da - wunderbar! Dafür sehe ich jetzt unten aber abschließend zwei anthrazit graue Trennlinien, die ich da nicht hingemacht habe. Wie kriege ich die wieder weg? Vorher waren sie nicht da. Dank für Tipps und Tricks im Voraus! Zur Erinnerung: www.nutzrad-studio.de

  • Hallo,


    da ich mich gerade im "Sofa-Tablet-Modus" befinde und nicht vor meiner "Arbeitsmaschine" sitze, kann ich dir gerade nur bedingt weiterhelfen.


    Die Trennlinie, solltest du im Layoutdesigner > Hauptmenü >Trennlinie durch ein dortiges umstellen auf "Transparent" wegbekommen.
    (Die sind jetzt da, durch den wechsel des Layouts).


    Spezielle "Einstellungen" für die mobile Ansicht gibt es im ZP nur sehr sehr wenige (geht nur manuell über CSS).
    Wegen deiner andere Sache, schau ich mal morgen danach.
    Wobei, es vermutlich daran liegen könnte, an deinem speziellen Aufbau deines Menüs.
    Es könnte sein, das du dir da was anderes dazu überlegen musst.


    Gute Nacht :)

  • Guten Morgen,


    so ausgeschlafen und mit einem Kaffee bewaffnet, hab ich mir das eben nochmals angesehen.


    Und dabei deinen "begangenen Grundfehler" ;) der nun leider u.a. in der "mobilen Ansicht" reinhaut gefunden, der da wäre:


    Für das Layout ist die Navigationsleiste des Standard-Layouts „Clean Style“ für mich nicht ideal gewesen. Ich habe also eine eigene auf jede Seite neu eingefügt. Die vom Layout „gesetzte“ Navigation habe ich an das Ende der Homepage gebastelt, in dem ich alle Artikel darüber eingefügt habe.

    Du hast also deine ganzen Inhaltsartikel im sogenannten "Bannerbereich" und nicht im "Standardbereich" eingefügt (zu sehen wenn du mit F8 auf die Spaltenansicht umschaltest).
    Für so etwas ist das Layout eigentlich nicht ausgelegt, da man im Normalfall alle Artikel unter dem Menü (im Standardbereich) einfügt, und nicht darüber.
    Damit kann die "reponsive Darstellung" nicht ganz sauber und korrekt umgesetzt werden, und daher der "Schönheitsfehler" nun bei dir.


    Da gibt es nun 3 Möglichkeiten für dich:


    1: Durch eine etwas größere "manuelle Bastelei", könnte man das evtl. schon "hinbiegen" (> Nicht meine Empfehlung)
    2: Du ordnest (baust) das Projekt nochmals neu mit dem layout auf, und achtest dabei darauf, die Artikel im Standardbereich einzufügen (> Auch nicht meine Empfehlung)
    3: Auf ein anderes (responsives) Layout zu wechseln, das deiner Seite "mehr Platz" geben würde (würde mit Sicherheit besser aussehen), und bei dem die Darstellung sowohl in der Dekstop wie in der Mobile Ansicht 100% frei haus passen würe (dies immer wieder zwischendurch testen, beim Aufbau eines Projektes).
    Dabei solltest, du aber dein Projekt auch frisch "anordnen", also Artikel im Standard-Bereich platzieren (> Wäre ganz klar, meine Empfehlung).

  • Guten Morgen Jochen,
    naja, eigentlich: Mahlzeit!


    Danke für Deine Vorschläge!


    Ich kann alle Aspekte nachvollziehen und realisiere auch, dass ich mir mit der navbar ins eigene Fleisch geschnitten habe. Allerdings fehlt mir aktuell die Zeit und Muße eine Neuauflage in einem neuen responsive Design zu gestalten. Des Weiteren bin ich mit der aktuellen Homepage nicht ganz unglücklich. In mittelfristiger Zukunft sieht das vielleicht etwas anders aus. ;)


    Kennst du einen CSS Schnipsel, der möglicherweise das Logo verkleinert / löscht in der mobilen Datenansicht? Damit könnte ich zumindest die Überlagerung schönigen. Der Rest - nun naja. Momentan gehe ich eh davon aus, dass potentielle Interessenten eher via Website am Rechner die Libelle studieren.


    Vielen Dank im Voraus!


    Heidemann

  • Hallo Heidemann,


    sorry, aber das ist in deinem Fall, leider nicht so "geschwind" umzusetzen und passt in mein "Zeitraster" das ich hier für individuelle CSS-Wünsche immer einplane, leider nicht rein.
    Wenn du dich ein wenig mit CSS auskennen solltest, dann kann ich dir die Seite vom @Mario dazu empfehlen: https://www.zella.de/code/
    Wenn du dich dort auf die Suche danach machst, und dich von seinen Beispielen davon inspirieren und leiten lässt, könntest du eine Lösung dazu finden.
    Wenn das nichts werden sollte, dann bleibt dir nichts anderes übrig, wie das ganze Projekt umzubauen.

  • Hallo Heidemann,
    wenn ich das richtig sehe hast du das Logo über das Widget "Bild" eingefügt?



    Du könntest das Bild mit folgendem CSS ab einer bestimmten Bildschirmbreite verkleinern.
    Gehe zu Einstellungen > CSS und und füge dort folgendes ein:

    CSS
    1. <style>
    2. @media (max-width: 669px) {
    3. .logoscale {
    4. transform: scale(.5, .5);
    5. }
    6. </style>


    Nun öffnest du das Widget "Bild" in dem du das Logo eingebunden hast. Gehst hier unten links auf das "Mischpult" und dann Rechts auf "MEHR".
    Hier fügst du unter CSS-Klasse folgendes ein:


    Code
    1. logoscale


    Jetzt wird dein Logo ab einer Bildschirmbreite von 669 Pixeln um 50% verkleinert dargestellt.

  • Hi Mario,
    herzlichen Dank. Ich habe den Code umgesetzt. und das Logo ist kleiner. Dankeschön!


    1.
    Die Position des Logos ist aber "sch****". :) Geht genau über die Trennlinie etc.
    Kann man die noch irgendwie beeinflussen?? :(


    2.
    Ich beherzige übrigens gerade Jochens Vorschlag und bastele eine neue Website: http://libelle.bplaced.net/htdocs/ .Ich weiß, ich weiß... lange Ladezeiten der Bilder etc. (werden noch komprimiert...)
    Dort möchte ich gerne den Kopf (Logo + Navigation gerne mitscrollen lassen. Wie geht das??
    Zweitens habe ich immer unter der Navigation zum container und ganz unten zum Footer zu wenig oder zu viel Abstand (oben weißer Rand (siehe Technologie), unten keine sichtbare Trennlinie (siehe Startseite))
    Hintergrund: ich habe das Onepage-Modul von Mario eingebaut.


    Wie immer herzlichen Dank für Eure Hilfe!