HappyHands31 HappyHands31 - 10 months ago 61
jQuery Question

Hamburger Menu Not Working On WordPress Site

Here is my website:

I followed the tutorial here: http://www.internetkultur.at/simple-hamburger-drop-down-menu-with-css-and-jquery/, but unfortunately my hamburger menu is always visible (it's only supposed to be visisble from 0-780px) and it doesn't work.

I copied and pasted the code from the HTML section into header.php. The code from the tutorial starts with div class="mobile nav" and ends with it's respective div. I also added

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

to link header.php to the javascript code from the tutorial. Javascript.js was uploaded to the child theme.

/** * Header template * * @package Portfolio Press */?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<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' ); ?>">

<?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( '/' ) );
<img src="<?php echo esc_url( portfoliopress_get_option( 'logo' ) ); ?
>" alt="<?php echo bloginfo( 'name' ) ?>">

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

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

<div class="responsive-menu">
<li><a href="http://drawyourpets.com/">
<a href="http://drawyourpets.
<li><a href="http://drawyourpets.com/index.php/video-3/">
<a href="http://

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

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

Besides that, I just added the CSS from the tutorial into my child theme stylesheet with this media query above it:

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

So I'm not sure what I've done wrong or what I need to do to fix it. Let me know if you have any ideas. Thanks!

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

Firstly, the path is wrong; 404;

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

bloginfo('template_url'); This is your path of theme, you can upload the javascript.js to the corresponding path

Secondly, the "javascript.js" need "jquery.js"; So you must add this behind "jquery.js"