Menü-Toggle formatieren

    Guten Tag, ich habe folgenden Code:


    .menu-toggle,


    input[type="submit"],


    input[type="button"],


    input[type="reset"],


    article.post-password-required input[type="submit"],


    .bypostauthor cite span {

    ... ab hier div. Befehle...


    }

    Den normalen Toggle zu formatieren ist kein Problem. Wie formatiere ich aber die Hover-Funktion? Irgendwo a:hover einsetzen/anhängen?

    Guten Morgen, ich gebe den Link zu meiner Homepage: https://www.m-schmid.ch
    Es handelt sich um den Button "Suchen" oben rechts.


    Wenn ich mit der Maus darüberfahre, ändert sich der Hintergrund in grau. Das möchte ich ändern, aber wie?

    Mit dem zusätzlichen Befehl :hover ist mir das nicht gelungen.


    Noch etwas - wenn ich darf:
    Wie kann ich im mobilen Menü die Menüpunkte mit weissem Hintergrund alle gleich breit machen? Genau so wie ich es im Desktop-Menü gemacht habe mit:


    .main-navigation li a,
    .main-navigation li a:focus,
    .main-navigation li a:active {
    width:7.5rem;

    }


    Der gleiche Befehl funktioniert nicht nach:

    @media screen and (max-width: 600px)

    Bin gerade im Urlaub und daher nur mobil unterwegs. Kann also selber nicht nachschauen und nur allgemeine Antworten geben:


    Gehe auf deine Seite, öffne die Entwicklertools (F12) und wähle dann mit dem "Auswahl-Tool" oben links in der Ecke das entsprechende Element auf der Seite aus oder suche es alternativ in dem HTML-Code. Wenn du es ausgewählt hast, werden dir rechts an der Seite die entsprechenden CSS-Anweisungen aufgelistet. Anschließend suchst du dir die Zeile raus, wo dein Button angesprochen wird und änderst dies deinen Wünschen entsprechend. Für die Hintergrundfarbe z.B. mittels background-color.


    Bei dem zweiten Problem kann ich dir so gerade gar nicht helfen...

    Danke JR Cologne, deine genannte Methode mit dem Entwicklertool kenne ich. Beim Button wird aber der normale Zustand angezeigt und nicht der Hover-Zustand.
    Komischerweise funktioniert es nicht wenn ich .menu-toggle ergänze zu .menu-toggle:hover.


    Ich habe die Lösung (im WordPress): Der Hover-Zustand wurde vom style.css des Parent-Themes bestimmt. So habe ich diesen Code ins Child-Theme kopiert und abgeändert.


    Das zweite Problem ist immer noch pendent.

    Ach, ja. Stimmt. Um :hover und sonstige besondere Zustände anzuzeigen, musst du das erst explizit auswählen. Müsste irgendwo über den CSS-Styles sein...


    Schön, dass du eine Lösung gefunden hast.


    Beim zweiten Problem kann ich, wie gesagt, ohne mir den Code selber anzuschauen, nicht groß helfen.

    Zitat

    Wie kann ich im mobilen Menü die Menüpunkte mit weissem Hintergrund alle gleich breit machen?

    Die Breite hast Du ja schon gesetzt. Damit dies wirksam wird, musst Du noch display: inline-block hinzu fügen. Dadurch verändert sich das Layout leicht, aber das kannst Du dann sicher wieder anpassen.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden