Menübuttons mit Textwidget

  • Hallo,
    ich bin ziemlich neu in dem Bereich und stehe im Moment vor folgendem Problem.
    Ich habe das Hauptmenü meiner Seite mit einem Textwidget gemacht und in dem steht folgender Code:
    <div id="homenav">
    <a href="http://localhost/wordpress/" id="button1"></a>
    <a href="http://localhost/wordpress/diana" id="button2"></a>
    <a href="http://localhost/wordpress/portfolio" id="button3"></a>
    <a href="http://localhost/wordpress/blog" id="button4"></a>
    <a href="http://localhost/wordpress/contact" id="button5"></a>
    </div>

    CSS:
    #homenav {
    display: inline-block;
    position: absolute;
    overflow: hidden;
    z-index: 1;
    margin: -23px 0px 0 45px;
    float: left;
    }


    #button1 {
    display: inline-block;
    background-position: center top;
    background-repeat: no-repeat;
    height:45px;
    width:70px;
    background-image:url(images/nav_home_n.png);
    }
    #button1:hover {
    background-image:url(images/nav_home_a.png);
    }
    usw.


    Das funktioniert so auch alles wie es soll, nur soll auf der aktiven Seite das selbe hintergrundbild bei dem jeweiligen Button sein wie beim hover.
    Ich komme da einfach nicht weiter.

    • 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

  • Hallo

    Prinzipiell würde ich ja eher mit einem Individuellen Menü-Widget arbeiten, dass hat dan auch den Vorteil, dass es später einfacher anpassbar ist.

    Um aber bei deinem Beispiel zu bleiben:
    Wenn dein Theme mit body_class arbeitet könnest du das so umsetzen:

    Code
    .bodyclass-der-page-von-button1 #button1 {background-image:url(images/nav_home_a.png);}
    usw.

    LG

Jetzt mitmachen!

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