admin管理员组

文章数量:1389762

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");
  }

})();

本文标签：

版权声明：本文标题：twentysixteen child theme - responsive menu - ham icon button not working - Cannot read property &#39;classList&#39; of 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744699981a2620504.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。