Меню гамбургеров не работает на сайте WordPress
Вот мой сайт:
drawyourpets.com
Я следовал за учебником здесь: http://www.internetkultur.at/simple-hamburger-drop-down-menu-with-css-and-jquery/, но, к сожалению, мое меню гамбургера всегда видно (оно должно быть видимым только в диапазоне 0-780 пикселей) и не работает.
Я скопировал и вставил код из раздела HTML в header.php. Код из учебника начинается с div class = «mobile nav» и заканчивается соответствующим div. Я также добавил
<script src="javascript.js"></script>
связать header.php с кодом JavaScript из учебника. Javascript.js был загружен в дочернюю тему.
<?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">
Кроме того, я просто добавил CSS из учебника в мою таблицу стилей дочерней темы с этим медиа-запросом над ним:
@media screen and (min-width: 780px) .menu-btn div {
Поэтому я не уверен, что я сделал неправильно или что мне нужно сделать, чтобы это исправить. Дайте мне знать, если у вас есть идеи. Спасибо!
Решение
<script src="javascript.js"></script>
Во-первых, путь неправильный; 404;
<script src="<?php bloginfo('template_url'); ?>/js/javascript.js"></script>
bloginfo ( ‘template_url’); Это ваш путь к теме, вы можете загрузить javascript.js по соответствующему пути
Во-вторых, «javascript.js» нужно «jquery.js»; Так что вы должны добавить это за «jquery.js»
Другие решения
Нет, вы просто включаете файлы jQuery. Добавь это :
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
выше вашего javascript.js