javascriptのイベントリスナーでエラーが生じます

Question

ハンバーガーメニューをクリックするとクラスが付与されるようにしたいです。

▼HTML
<div class="u-md_b l-header">
<div class="c-humberger">
<div></div>
<div></div>
<div></div>
</div>
<nav>
<ul>
<li class="c-link"></li>
<li class="c-link"></li>
<li class="c-link"></li>
</ul>
</nav>
</div>

▼js

var wrapper = document.querySelector('l-header');
var navBtn = document.querySelector('c-humberger');

navBtn.addEventListener('click', navToggle = function() {
wrapper.classList.toggle('l-header--open');
});

▼エラー
parts.js:1 Uncaught TypeError: Cannot read property 'addEventListener' of null
クリックしてもクラスが付与されません。

▼試したこと
jsの外部ファイルはbodyの閉じタグの直前にいれてます。

Answer 1

querySelectorでクラス名を指定するには、ドット(.)が必要です。
var navBtn = document.querySelector('.c-humberger');