Top Bar - verdeckt mir die Navi

1. offizieller Beitrag

    Hallo Mario

    Ich habe bei meiner Testseite preview deine Topbar eingebaut. Gefällt mir sehr gut!

    Wenn ich jetzt aber scrolle, verdeckt die Topbar die Navigation (und das jetzt verkleinerte Logo).

    Was muss ich da noch anpassen.

    Wird nachher auf der Seite erma.ch sein, ZP 16.3 Business, Flat Responsive.

    Gruss


    Pete

    • Offizieller Beitrag

    Ist in diesem Layout gerade mit dieser Einstellung etwas tricky.

    • Der erste Teil des untenstehenden Codes rutscht Logo und Navi 30px nach unten, brauchst du eventuell gar nicht..
    • Der 2. Teil platziert die Navi 30px nach unten wenn nach oben gescrollt wurde. Allerdings erst wenn die Navi ganz nach oben gescrollt wurde. Das wird sicher mit JS angesprochen. Welches ich allerdings nicht gefunden habe.


    CSS
    <style>
#header #webdescription #logo img {
margin-top:30px !important;
}
#header #nav.fixed {
top:30px;
}
</style>

    Ah, Danke, ich werde weiter versuchen, im 2. Test (mit Deiner obigen Änderung) sieht es schon ganz ok aus.

    Gruss

    Peter

    Freundliche Grüsse

    Pete



    - ZP 16.8.6 Business / Flat Responsive

    - www.erma.ch - immer in Arbeit, es ist noch viel zu tun

    Hallo Mario

    Bin beim Testen noch nicht ganz erfolgreich gewesen.

    Die Navi-Leiste wird jetzt korrekt angezeigt, leider verschwinden aber die "Breadcrumbs" unter der Navileiste.

    Und wie verkleinere ich die Distanz zum ersten Text (zwischen Breadcrumbs und "Gestelle für jeden Zweck..."?



    Gruss, guten Rutsch und auf ein "weniger verrücktes 2022"!

    Peter

    Freundliche Grüsse

    Pete



    - ZP 16.8.6 Business / Flat Responsive

    - www.erma.ch - immer in Arbeit, es ist noch viel zu tun

    Danke, ich glaub jetzt hab ich's!


    Ich hatte noch einen Code drin, dass das Logo direkt in der Navi angezeigt wird (nicht zuerst darüber). Das war ein Code von Orus:


    <style>

    /* Layout Flat Responsive Logo auf Höhe Menü */

    #header #webdescription {

    display: none;

    }

    </style>

    Für die TopBar habe ich jetzt Dein Widget genommen plus diesen Code von Dir:

    <style>

    /* Verschieben Navi TOP BAR - Mario */

    #header #webdescription #logo img {

    margin-top:-30px !important;

    }


    #header #nav.fixed {

    top:30px;

    }

    /* Ende Verschieben Navi Top Bar - Mario */

    </style>


    Ist jetzt bereits auf https://www.erma.ch live.

    Gibt es auch die Möglichkeit, die breadcrumbs zu fixieren, also dass diese beim Scrollen unter der Navi stehen bleiben?

    Vielen Dank, Gruss

    Peter

    Freundliche Grüsse

    Pete



    - ZP 16.8.6 Business / Flat Responsive

    - www.erma.ch - immer in Arbeit, es ist noch viel zu tun

    • Offizieller Beitrag
    Zitat von Pete

    Gibt es auch die Möglichkeit, die breadcrumbs zu fixieren, also dass diese beim Scrollen unter der Navi stehen bleiben?

    Davon würde ich auf jeden Fall abstand nehmen.

    1. Bleibt dann gerade am Smartphone nicht mehr viel vom Inhalt zu sehen.
    2. Hat die breadcrumbs keine Hintergrundfarbe, das würde dann sehr bescheiden aussehen wenn der Inhalt darüber scrollt.





    Zitat von Pete

    Die Navi-Leiste wird jetzt korrekt angezeigt, leider verschwinden aber die "Breadcrumbs" unter der Navileiste.

    Und wie verkleinere ich die Distanz zum ersten Text (zwischen Breadcrumbs und "Gestelle für jeden Zweck..."?

    Sollte das noch aktuell sein kannst du das mit mit folgendem Code anpassen.

    • Der erste Teil verschiebt die breadcrumbs um 30 Pixel nach unten.
    • Der zweite Teil verringert den Abstand zum darunter liegenden Artikel um 30 Pixel.
    CSS
    #breadcrumb {
  margin-top:30px;
  margin-bottom:-30px;
}