Sidebar on top (Mobile)

  • Hey Leute,

    ich bin gerade am verzweifeln, da ich es einfach nicht hinbekomme, die Sidebar bei meiner Seite (Mobile View) an erster Stelle zu bekommen! Folgenden custom Css Code habe ich verwendet:

    ` Media only screen and (max-width: 767px) {

    .container > .row {

    display: flex;

    flex-direction: column-reverse;

    }

    }

    Als Theme verwende ich das Barcelona. Keine Chance, die Sidebar bleibt brav am Boden!
    Hat von euch jemand eine Idee? Vielen Dank im Voraus
    LG Manuel

    support vom theme gibt leider keine Rückmeldung :(

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Hier ein Ansatz, entspr. in gewünschte Media Query verpacken, mit natürlich noch weiteren Tests und ggf. nötigen Anpassungen für andere Breakpoints usw.

    Code
    .row-primary.has-sidebar {
        display: flex;
        flex-flow: column;
    }
    .row-primary.has-sidebar #main {
        order: 2;
    }
    .row-primary.has-sidebar #sidebar {
        order: 1;
    }
  • Hier ein Ansatz, entspr. in gewünschte Media Query verpacken, mit natürlich noch weiteren Tests und ggf. nötigen Anpassungen für andere Breakpoints usw.

    Code
    .row-primary.has-sidebar {
        display: flex;
        flex-flow: column;
    }
    .row-primary.has-sidebar #main {
        order: 2;
    }
    .row-primary.has-sidebar #sidebar {
        order: 1;
    }

    Hey,

    sorry für die späte RM. Hab das gerade eingebaut und funktioniert wunderbar! Vielen lieben Dank für die schnelle kompetente Hilfe!
    Weiß ich echt zu schätzen!
    LG

  • Hallo Leute,

    ich bräuchte bei dem Code nochmals eure Hilfe. Ich würde gerne die Sidebar nur auf der Homepage oben anzeigen lassen.
    Geht das?
    Danke im Voraus
    LG Manuel

  • Setze noch jeweils die Bodyklasse [FONT=Courier New].home[/FONT] vor alle Regeln:

    Code
    .row-primary.has-sidebar ...


    wird zu:

    Code
    .home .row-primary.has-sidebar ...


    Ergänzung: Mehr zu den diversen CSS Klassen, die WordPress normalerweise je nach Seite für den body Tag nutzt siehe auch hier in einem Kommentar zur [FONT=Courier New]body_class()[/FONT] Funktion.

    2 Mal editiert, zuletzt von b3317133 (5. Mai 2021 um 22:24)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!