2016-03-31 26 views
1

Hier ist meine Website: drawyourpets.comHamburger-Menü funktioniert nicht auf Wordpress-Site

ich das Tutorial hier folgte: http://www.internetkultur.at/simple-hamburger-drop-down-menu-with-css-and-jquery/, aber leider mein Hamburger Menü ist immer sichtbar (es ist nur von 0-780px sein visisble soll) und es funktioniert nicht.

Ich habe den Code aus dem HTML-Bereich kopiert und in header.php eingefügt. Der Code aus dem Tutorial beginnt mit div class = "mobile nav" und endet mit dem entsprechenden div. Ich fügte auch

<script src="javascript.js"></script> 

hinzu, um header.php mit dem Javascript-Code vom Tutorium zu verbinden. Javascript.js wurde auf das untergeordnete Thema hochgeladen.

<?php 
/** * Header template * * @package Portfolio Press */?> 
<!DOCTYPE html> 
<html <?php language_attributes(); ?>> 
<head> 
<meta charset="<?php bloginfo('charset'); ?>"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="profile" href="http://gmpg.org/xfn/11"> 
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>"> 

<script src="javascript.js"></script> 

<!--[if lt IE 9]> 
<script src="<?php echo esc_url(get_template_directory_uri() . 
'/js/html5.js'); ?>"> 
</script><![endif]--> 

<?php wp_head(); ?></head><body <?php body_class(); ?>><div id="page"> 
<header id="branding"> 
<div class="col-width"> 
<?php $heading_tag = (is_home() || is_front_page()) ? 'h1' : 'div'; ? 
>   

<div class="logo">    
<a href="<?php echo esc_url(home_url('/')); 
?> 
"rel="home">      
<img src="<?php echo esc_url(portfoliopress_get_option('logo')); ? 
>" alt="<?php echo bloginfo('name') ?>"> 
</a>    
</div>   

<div class="site-description">    
<h1 id="pets">DRAW YOUR PETS</h1>    
<h3 id="italic">-The Creative Side- 
</h2>   
</div>   
<div class="clear clearfix"> 
</div>   
<div class="site-navigation primary-navigation" role="navigation"> 

<div class="mobile-nav"> 
<div class="menu-btn" id="menu-btn"> 
<div></div> 
<span></span> 
<span></span> 
<span></span> 
</div> 

<div class="responsive-menu"> 
    <ul> 
     <li><a href="http://drawyourpets.com/"> 
     HOME</a> 
     </li> 
     <li> 
     <a href="http://drawyourpets. 
     com/index.php/audio/"> 
     AUDIO 
     </a> 
     </li> 
     <li><a href="http://drawyourpets.com/index.php/video-3/"> 
     VIDEO 
     </a> 
     </li> 
     <li> 
     <a href="http:// 
     drawyourpets.com/index.php/other/"> 
     OTHER</a> 
     </li> 
     </ul> 
    </div> 
</div> 

<?php wp_nav_menu(array('theme_location' => 'primary', 'menu_class'| 
=> 'nav-menu')); ?>   

</div> 
<div id="main">  
<div class="site-wrapper"> 

Abgesehen davon, habe ich nur noch die CSS aus dem Tutorial in meinem Kind Thema Sheet mit dieser Medien Abfrage darüber:

@media screen and (min-width: 780px) .menu-btn div { 

Also ich bin nicht sicher, was ich falsch gemacht habe oder Was muss ich tun, um es zu reparieren? Lass es mich wissen, wenn du Ideen hast. Vielen Dank!

Antwort

2
<script src="javascript.js"></script> 

Erstens ist der Pfad falsch; 404;

<script src="<?php bloginfo('template_url'); ?>/js/javascript.js"></script> 

bloginfo ('template_url'); Dies ist Ihr Pfad des Themas, können Sie die javascript.js auf den entsprechenden Pfad hochladen

Zweitens benötigt die "javascript.js" "jquery.js"; Also müssen Sie dies hinter "jquery.js" hinzufügen

+0

Was meinen Sie damit? Muss ich javascript.js in jquery.js ändern? - Ich habe es versucht und nichts ist passiert. – HappyHands31

+0

http://adriennecoleman.drawyourpets.com/javascript.js Dies ist Ihre js, 404 –

+0

Sie müssen den richtigen Pfad hinzufügen –

1

Nein, Sie enthalten nur eine jQuery-Dateien. Fügen Sie diese:

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script> 

über dem javascript.js

+0

Was meinst du mit "über dir javascript.js"? Bedeutet das, dass ich das schreibe? /js/Javascript.js "> – HappyHands31

+1

Ja, versuche es einfach und poste es erneut, wenn du hier einen Fehler hast :) – filosofikode

Verwandte Themen