1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

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

Dieses Thema im Forum "Design" wurde erstellt von HeikeGutsche, 7. Juni 2020.

  1. HeikeGutsche

    HeikeGutsche New Member

    Registriert seit:
    9. August 2015
    Beiträge:
    4
    Zustimmungen:
    0
    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
     
  2. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    7.475
    Zustimmungen:
    759
    Link zu Deiner Seite? Mit welchem CSS warst Du erfolglos?
     
  3. HeikeGutsche

    HeikeGutsche New Member

    Registriert seit:
    9. August 2015
    Beiträge:
    4
    Zustimmungen:
    0
    Die Seite ist noch nicht online erreichbar, da im Aufbau. Soll ich Bildschirmfotos hochladen?

    Ich hatte über css probiert, mein Icon einzubauen. Sehen kann ich es zwar, aber der ursprüngliche Button ist auch noch da.

    Dies ist das CSS:

    .menu-toggle {
    background-image: url('https://heikegutsche.de/wp-content/uploads/2020/06/ic_menu.png');
    background-size: 35px;
    background-repeat: no-repeat;
    }

    Hab's halt einfach falsch gemacht.
     
  4. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    7.475
    Zustimmungen:
    759
    Falls Du die drei Balken meinen solltest, die könntest Du z.B. so ausblenden:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Und dann Dein Icon ggf. noch passender platzieren (bei Nutzung Standard Twenty Seventeen Theme):
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Und Dich dann noch um die hover Dinge kümmern...
     
  5. HeikeGutsche

    HeikeGutsche New Member

    Registriert seit:
    9. August 2015
    Beiträge:
    4
    Zustimmungen:
    0
    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.

    button-menu-toggle.jpg

    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?
     
  6. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    7.475
    Zustimmungen:
    759
    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 margin-right: 0; erreichen.

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

    HeikeGutsche New Member

    Registriert seit:
    9. August 2015
    Beiträge:
    4
    Zustimmungen:
    0
    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.
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden