ハンバーガーメニューをヘッダーの下から出す

前提・実現したいこと

HTML、CSSの勉強でサンプルページを真似していて、ハンバーガーメニュー自体はできていて、ヘッダーの下からニョキっとメニューバーを出現させるためのスタート位置の指定もできているのですが、最初からメニューバーが出現してしまいます。
メニューバーがない状態からハンバーガーボタンを押したときにメニューバーが出るようにするにはどうすればいいでしょうか？

真似をしているサンプルページ

該当のソースコード

HTML
1<header class="body-header">
2            <div class="body-header-left">
3                <img src="images/logo.png" alt="">
4            </div>              
5            <!-- ナビゲーション -->
6        <nav class="headerNav">
7            <ul class="navList">
8                <li class="navItem">
9                    <a href="#" class="hoverFloatBtn">
10                        TOP
11                    </a>
12                </li>
13                <li class="navItem">
14                    <a href="#" class="hoverFloatBtn">
15                        MESSAGE
16                    </a>
17                </li>
18                <li class="navItem">
19                    <a href="#" class="hoverFloatBtn">
20                        GALLERY
21                    </a>
22                </li>
23                <li class="navItem">
24                    <a href="#" class="hoverFloatBtn">
25                        BRAND
26                    </a>
27                </li>
28                <li class="navItem">
29                    <a href="#" class="hoverFloatBtn">
30                        PROJECT
31                    </a>
32                </li>
33                <li class="navItem">
34                    <a href="#" class="hoverFloatBtn">
35                        COMPANY
36                    </a>
37                </li>
38            </ul>
39        </nav>
40    
41        <!-- ハンバーガーボタン -->
42        <div class="hamburger_btn" id="js-hamburger">
43            <span class="hamburger_line hamburger_line_1"></span>
44            <span class="hamburger_line hamburger_line_2"></span>
45            <span class="hamburger_line hamburger_line_3"></span>
46        </div>
47    </div>
48    </header>
49    <!-- End header -->      
50        </header>

CSS
1/*
2----------------------
3Start ハンバーガーメニュー
4----------------------
5/* Start ナビゲーション */
6.headerNav {
7  position: relative;
8  top: -10px;
9  width: 100%;
10  height: 45%;
11  background-color: #000;
12  -webkit-transition: all 0.6s;
13  transition: all 0.6s;
14  z-index: 1;
15}
16.navList {
17  border-bottom: 1px solid #ccc;
18  background: #000;
19  text-align: left;
20}
21.navItem {
22  height: 10%;
23}
24.navItem a {
25  position: relative;
26  display: block;
27  padding: 15px 25px;
28  border-bottom: 1px solid #ccc;
29  color: #fff;
30  font-weight: 400;
31}
32/* End ナビゲーション */
33
34/* Start ハンバーガーボタン(三本線の実装) */
35.hamburger_btn {
36  position: absolute; /*.headerNavOuterを基準にして、絶対配置*/
37  right: 0;
38  top: 0;
39  width: 55px;
40  height: 55px;
41  cursor: pointer;
42  z-index: 30;
43}
44.hamburger_line {
45  position: absolute; /*.headerNavOuterを基準にして、絶対配置*/
46  left: 8px;
47  width: 25px;
48  height: 1px;
49  background-color: #fff;
50  -webkit-transition: all 0.6s;
51  transition: all 0.6s;
52}
53.hamburger_line_1 {
54  top: 20px;
55}
56.hamburger_line_2 {
57  top: 26px;
58}
59.hamburger_line_3 {
60  top: 32px;
61}
62/* End ハンバーガーボタン(三本線の実装) */
63
64/* Start ハンバーガーボタンをクリックした際の動き */
65/* ナビゲーションが現れる */
66.nav-open .headerNav {
67  top: -10px;
68  display: block;
69}
70
71/* 三本線のハンバーガーを、バッテンにします */
72.nav-open .hamburger_line_1 {
73  -webkit-transform: rotate(45deg);
74  transform: rotate(45deg);
75  top: 25px;
76}
77.nav-open .hamburger_line_2 {
78  width: 0;
79  left: 50%;
80}
81.nav-open .hamburger_line_3 {
82  -webkit-transform: rotate(-45deg);
83  transform: rotate(-45deg);
84  top: 25px;
85}
86/* End ハンバーガーボタンをクリックした際の動き */
87/*
88----------------------
89End ハンバーガーメニュー
90----------------------
91*/
92

Javascript
1function toggleNav() {
2  let body = document.body;
3  let hamburger = document.getElementById('js-hamburger');
4
5  hamburger.addEventListener('click', function() {
6    body.classList.toggle('nav-open');
7  });
8}
9  toggleNav();