Header Menü :hover Effekt und .js Einbindung

  • Guten Abend Community!

    Ich hab da ein kleines Problem: Und zwar verwende ich einen :hover Effekt bei meinem Menü - der Hintergrund des Menüpunktes färbt sich wunderbar um wenn ich mit dem Zeiger drüber gehe nur die Schrift möchte sich nicht auf weiß umstellen. Ich hab es auch schon mit "!important" probiert, dies hilft nur leider auch nicht.

    Hier meine Snippets:

    CSS
    nav li:hover {
        background-color: #F9AB13;
        color: white !important;
        border-radius: 0.5em;
    }

    Des weiteren stellt sich mir noch eine Frage: Ich wollte ein eigenes Responsive Menü erstellen mit Hilfe von Javascript. Nun ist es mir, auch mit Plugins, nicht möglich eine .js Datei einzubinden geschweige den überhaupt Code. Folgendes hab ich in meine functions.php eingefügt - hab ich mich eventuell vertippt? Zumindest wird auch im Quelltext nicht angezeigt dass irgendetwas eingebunden wurde.

    PHP
    <?php wp_enqueue_script( 'menuscript', get_template_directory_uri() . '/assets/menuscript.js', array( 'jquery' ), 1.1, true);
    ?>


    Vielleicht versteht ja einer meine Probleme und kann mir Helfen :)

    • 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

  • Also folgendes hab ich nun in meiner functions.php geschrieben:

    PHP
    function rmenu () {
        wp_enqueue_script( 'rmenu', get_stylesheet_directory_uri() . '/assets/rmenu.js', array(), false, false );
    }
    add_action('wp_enqueue_script', 'rmenu');


    Eingebunden wird es dennoch nicht. Die Datei "rmenu.js/ liegt im Ordner "assets" welcher in meinem Theme Ordner zu finden ist. Also die Verlinkung sollte auch richtig sein.

    Zum :hover Effect https://1kalp32e.kevrn.de/
    Wie ist es möglich dass der ganze "Button" verlinkt ist und nicht nur die Schrift? Blicke da irgendwie nicht durch da Wordpress automatisch noch eigene Klassen hinzufügt. Gibt es da auf der Wordpress Seite auch Informationen zu? Finde da einfach nichts.

    Eigentlich sollten die Menüpunkte auch Icons haben, im Quelltext sieht man auch dass welche eingefügt wurden, nur wie man sieht sieht man nichts davon. In den Plugin FAQs steht:

    Zitat


    Make sure that your active theme is using the default walker for displaying the nav menu.


    Kannst du mir dazu vllt. etwas sagen?

    Nachtrag: Also langsam verliere ich den gefallen an Wordpress. Selbst "::selection" kann ich nicht so einfach über CSS einfügen. Wenn ich es in meinen reinen HTML & CSS Template hinzufüge funktioniert es 1A -_-

    Ich danke dir schon mal :)

    3 Mal editiert, zuletzt von kevrn (23. Januar 2023 um 17:18)

  • Code Beispiele:

    Code
    add_action( 'wp_enqueue_scripts', 'blablabla' );


    Dein Code:

    Code
    add_action('wp_enqueue_script', 'rmenu');


    Es fehlt ein "s" am Ende des Namens der Action.

    Stelle ausserdem sicher, dass Dein Theme einen Aufruf von [FONT=Courier New]wp_head();[/FONT] in [FONT=Courier New]header.php[/FONT] bzw. [FONT=Courier New]index.php[/FONT] nutzt, siehe auch Theme Handbook Classic Theme.

    Für den Hover Effekt für die Schriftfarbe füge noch das hinzu:

    Code
    nav li:hover a {
      color: white;
    }


    Die fehlenden Icons im Menü liegen wahrscheinlich an fehlendem [FONT=Courier New]wp_head()[/FONT] und/oder [FONT=Courier New]wp_footer()[/FONT] im Theme.

    Ein Menü gibt man mit der Funktion [FONT=Courier New]wp_nav_menu()[/FONT] aus.

  • Danke dir vielmals es klappt nun alles super.

    EDIT: Ok ich hab herausgefunden dass dies der Abstand für die Wordpress Werkzeugleiste ist. Mir wurde nur keine angezeigt weswegen ich etwas verwundert war :D

  • Und wie schaffe ich es dass der ganze "Button" verlinkt ist und nicht nur die Menüschrift?

    Mein Header Menü soll eigentlich wie hier https://mobiledemov1.kevrn.de/ funktionieren nur klappt es leider nicht ganz. Sobald ich auf das "Burger" Icon klicke öffnet sich dass Menü nicht wie auf der "mobiledemo" Seite. Meine Javascript Datei ist aber nun mittlerweile eingebunden

    Einmal editiert, zuletzt von kevrn (24. Januar 2023 um 12:26)

  • Und wie schaffe ich es dass der ganze "Button" verlinkt ist und nicht nur die Menüschrift?

    Mein Header Menü soll eigentlich wie hier https://mobiledemov1.kevrn.de/ funktionieren nur klappt es leider nicht ganz. Sobald ich auf das "Burger" Icon klicke öffnet sich dass Menü nicht wie auf der "mobiledemo" Seite. Meine Javascript Datei ist aber nun mittlerweile eingebunden


    Ich kam nun selbst auf die Lösung. Falls jemand das selbe Problem hat: Die Javascript Datei muss am Ende geladen werden (im Footer) und nicht gleich am Anfang. Echt simpel und ich bin echt langsam am verzweifeln gewesen o_O

Jetzt mitmachen!

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