"button.menu-toggle" komplett ersetzen durch eigenes Icon

    Hallo in die Runde,

    ich verwende das Theme Twentyseventeen und möchte gerne den "button.menu-toggle" komplett ersetzen durch ein eigenes Icon.

    Ein Child-Theme habe ich eingerichtet. Nur über CSS wird es wahrscheinlich nicht gelingen, zumindest war ich damit bisher erfolglos :-)

    Ich wäre euch sehr dankbar für eure Unterstützung.

    Gruß
    Heike

    • Gerade eben
    • 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

    Falls Du die drei Balken meinen solltest, die könntest Du z.B. so ausblenden:

    CSS
    .menu-toggle svg {
    display: none !important;
}


    Und dann Dein Icon ggf. noch passender platzieren (bei Nutzung Standard Twenty Seventeen Theme):

    Code
    .menu-toggle {
   ...
   padding-left: 50px;
   background-position-y: center;
}


    Und Dich dann noch um die hover Dinge kümmern...

    Entschuldige, ich schreibe das erste Mal hier und dachte, alle wüssten, worum es sich dreht ;)
    Ja, ich meine das Sandwich-Menü, das auf mobilen Geräten erscheint.

    Anbei mal ein Bild:
    1) Oben im Bild: sitzt bereits mein Icon in dem "button.menu-toggle".
    2) Unten im Bild: dies ist der ganze Bereich des Buttons. Hier hover.

    Ich möchte alles Schwarze weg haben und stattdessen nur mein Icon zum Anklicken haben.


    Deine Lösung ersetzt nur das kleine schwarze Icon, aber nicht den ganzen Rest.

    Und noch eine Frage: Wie schaffe ich es, dass der Menü-Button dann rechtsbündig statt mittig auf der Seite steht?

    Wie beschrieben, kann man durch den o.g. Ansatz die drei Balken ausblenden.

    Den Text kannst Du z.B. durch eine sehr kleine Textgrösse und transparente Farbe ausblenden.

    Eine Rechtsbündigkeit kann man hier durch [FONT=Courier New]margin-right: 0;[/FONT] erreichen.

    Das sind aber alles keine WordPress Fragen, sondern eher grundlegendes CSS, sowas wäre ggf. in einem anderen Forum besser aufgehoben.

    Danke für die CSS-Infos. Ich bezog mich allerdings durchaus auf die vorhandene Struktur des Themes Twentyseventeen. Ich schau dann mal selbst weiter, danke.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden