versteckte Navigation in Responsive-Theme einbinden

Morten12

Hallo liebe WP-Freunde,
seit einiger Zeit versuche ich mich daran eine versteckte Navigation für das responsive-Design meines Themes zu basteln. Leider erfolglos!
Ich möchte, dass ab einer Breite von 480px das Menü versteckt wird. Allerdings bekomme ich es einfach nicht hin.

mein letzter Versuch war dieses Tutorial: hier

Ich habe alles genauso nachgemacht. Aber es klappt nicht. Vielleicht benötige ich für WP und die wp_nav_menu Funktion eine andere Variante?

Hier der Link zu meiner Seite: http://nuestra-america.de

Habt ihr Ideen?

Werbepost

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

SirEctor

Probier das mal:

Code

@media (max-width: 480px) {
.wp-nav {display:none;}
}

Morten12

Hi, danke für die Antwort.
Wenn ich display: none verwende, dann ist die Navigation natürlich weg. Aber sie kommt nicht wieder, wenn ich auf das Wort Menü klicke. Sie bleibt also versteckt. Das ist ja nicht mein Ziel.

Vielleicht habe ich auch die Javascript-Datei falsch abgelegt. Sie befindet sich momentan im Hauptordner meines Themes. Möglicherweise ist das aber nicht der richtige Ort. Wo muss ich die js.-Datei lagern bzw. wie verknüpfe ich die js.-Datei mit dem, was ich mit html und css zuvor angerichtet habe?

Kaycosmic

Hi,

Javascript Dateien solltest du über die functions.php mit deinem Theme verknüpfen.

Hier ein Beispiel (aus dem Codex von Wordpress):

PHP

<?php


function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri() . '/js/custom_script.js',
        array( 'jquery' ));
}


add_action( 'wp_enqueue_scripts', 'my_scripts_method' );


?>

Alles anzeigen

Morten12

Vielen Dank für die Antwort. Es hat tatsächlich an der Verknüpfung gelegen.
Ich habe jetzt folgenden <script>-Code in den Header eingegeben. Das funktioniert

PHP

<span class="menu-responsive">Menü</span>
        <script src="<?php echo get_template_directory_uri(); ?>/js/menu_width_480px.js" type="text/javascript"></script>
        <div class="wp-nav">
                <?php
                wp_nav_menu( array(
                            'theme_location' => 'haupt-menu',
                            'menu-class' => 'nav' ) );
                ?>
        </div>

Kaycosmic

So kann man das zwar machen, aber sauber ist das nicht und kann auch zu Problemen führen. Ich empfehle dir folgenden Link http://lloc.de/wordpress-css-…-einbinden.html. Da kannst du mal nachlesen warum man JS und CSS über die Wordpress eigene Funktion einbinden sollte.
Weiterhin scheint es mir so als würdest du für jede Javascript-Funktion eine eigene Datei schreiben, statt alle zusammen in einer. Das ist natürlich aus Performance-Sicht der ganz falsche Weg.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

versteckte Navigation in Responsive-Theme einbinden

Jetzt mitmachen!