Such-Widget aus Seitenleiste in Mobile-Ansicht oben anzeigen

SFrueh

(Neueste WP-Version, Theme Twenty-Eleven)

Hallo Wordpress-Nutzer,

ich nutze seit jeher das Theme Twenty-Eleven und bin damit sehr zufrieden. Allerdings hatte ich ein kleines Problem mit der Ansicht auf mobilen Endgeräten.

Und zwar hat Twenty-Eleven in der Kopfzeile ein Suchen-Feld. Wie sich herausgestellt hat, lag der "unsichtbare Rahmen" des Suchen-Felds in der Mobile-Version meiner Seite über den diversen Artikel-Kategorien, die ich in der Kopfzeile verlinkt habe.

Handy-Nutzer konnten die Artikel-Kategorien in der Kopfzeile also nicht anklicken.

Das Problem habe ich dank einiger guter Ideen hier aus dem Forum gelöst. Und zwar habe ich das Suchfeld ganz einfach mit <!-- aus der header.php getilgt und stattdessen ein Suchen-Widget in der Seitenleiste untergebracht. Klappt wunderbar!

Jetzt aber der Nachteil dieser Maßnahme:

Alles was in der Desktop-Version in der Seitenleiste ist, wird in der mobilen Version in der Fußzeile angezeigt. Auch das Suchen-Feld. Möchte ein Handynutzer einen bestimmten Artikel suchen, muss er zunächst die gesamte Startseite runterscrollen, weil er erst dort unten das (aus der Seitenleiste stammende) Suchen-Widget findet.

Die Frage daher:

Kann ich irgendwie einstellen, dass das Suchen-Widget aus der Seitenleiste in der mobilen Ansicht meiner Seite nicht in der Fußzeile sondern weiter oben angezeigt wird?

Das Suchen-Feld einfach in die Kopfzeile zu verfrachten, wäre aufgrund der oben beschriebenen Komplikationen leider keine Lösung.

Vielleicht weiß ja jemand Rat! Herzlichen Dank :)

SFrueh

Werbepost

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

Gast 100035

Zitat von SFrueh

Das Problem habe ich dank einiger guter Ideen hier aus dem Forum gelöst.

Und nun soll sich jeder an Deine Site erinnern? :(. Na, ein Link wäre also nicht schlecht.

SFrueh

Zitat von Kurt Singer

Und nun soll sich jeder an Deine Site erinnern? :(.

Nein, natürlich nicht :) Dachte nur es sei bei einem Theme-Problem nicht relevant.

Seite: https://dark-festivals.de/

Gast 100035

Ich wundere mich auch manchmal, was verschiedene Leute hier alles aus dem Quelltext herauslesen können, insofern wollte ich das nur anregen.

SirEctor

Als erstes blende bitte die Suche oben wieder ein und dann schreibe das zusätzlich unter Design -> Customizer -> Zusätzliches CSS

Code

@media all and (max-width:650px){
#branding .with-image #searchform {
    position: static;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    float: none;
    max-width: 100%;
}


#branding .with-image #searchform:after {
    content: "";
    display: block;
    clear: both;
    float: none;
    height: 0;
    visibility: hidden;
}


#branding .only-search #s, #branding .only-search #s:focus {
    float: none;
    width: calc(100% - 40px);
    max-width: 100%;
    position: static;
    top: initial;
    right: initial;
    left: initial;
    bottom: initial;
}
}

Alles anzeigen

SFrueh

Zitat von SirEctor

Als erstes blende bitte die Suche oben wieder ein und dann schreibe das zusätzlich unter Design -> Customizer -> Zusätzliches CSS

Hallo SirEctor, das ist ja absolut genial!
Dein Code tilgt den unsichtbaren Rahmen des Suchfelds im Header weg. Das kann ich jetzt ohne Nachteile für Mobile-Nutzer reaktivieren, entferne dafür das Suchen-Widget aus der Seitenleiste und alles funktioniert.

Ganz herzlichen Dank!!! :)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Such-Widget aus Seitenleiste in Mobile-Ansicht oben anzeigen

Jetzt mitmachen!