I am trying to convert this site / into twentysixteen child theme. It appears that /js/menu.js in my child theme is not working as nothing happens when the ham icon button is clicked (pls.see my site link above to check correct behavior). On inspecting via Google Chrome Inspect I am getting the following errors:
Uncaught TypeError: Cannot read property 'classList' of null at mediaqueryresponse (menu.js?ver=5.3.2:19) at menu.js?ver=5.3.2:10 at menu.js?ver=5.3.2:31 mediaqueryresponse @ menu.js?ver=5.3.2:19 (anonymous) @ menu.js?ver=5.3.2:10 (anonymous) @ menu.js?ver=5.3.2:31
Any advice is appreciated
header.php in child theme
<header class="header" id='myTopnav'>
<?php
wp_nav_menu(
array(
'theme_location'=> 'topnav',
'container' => 'nav',
'menu_class' => 'topnav',
'menu_id' => 'myTopnav',
)
);?>
<button class="ham-icon"><span class="fa fa-bars fa-2x"></span></button>
</header>
/js/menu.js in child theme
(function () {
var mql = window.matchMedia("screen and (max-width: 960px)");
//detect media query
var navTop = document.querySelector(".header");
//return first element within the document that matches .header
var toggle = document.querySelector(".ham-icon");
mediaqueryresponse(mql);
//ensures that addListener function is executed when the page loads, by default addListener only fires when state of the window changes
mql.addListener(mediaqueryresponse);
function mediaqueryresponse(mql) {
if (mql.matches) {
toggle.addEventListener("click", clickMenu);
//if media query matches, execute click or clickMenu event
} else {
navTop.classList.remove("responsive");
//otherwise remove .responsive
toggle.removeEventListener("click", clickMenu);
//and remove EventListener
}
}
function clickMenu() {
navTop.classList.toggle("responsive");
}
})();
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744699982a4588718.html
评论列表（0条）