ハンバーガーメニューのリンクを選択してもメニューが消えない

■実現したいこと
HTML、CSS、JavaScriptを使用してポートフォリオを作成しています。
ハンバーガーメニューを実装したのですがうまく動きません。

■要件
ハンバーガーメニューを作成。Gitにファイルをアップし自分の携帯端末iphone8で
ハンバーガーメニューを開き、リンクを選択した後メニューが消えません。

ただし、
ＰＣのデベロッパーツールを使用してiphone6/7/8の設定に変更。
ハンバーガーメニューからメニューを開きリンクを選択した後、メニューが消える。

　リンク選択後メニューを消したいのですが、何か考えられることはありますでしょうか？

行動規範の内容に同意します

回答1件

自己解決

HTML
1    <header id="header">
2        <div class="container">
3            <img src="img/bussines02.jpg">
4            <!-- スマホ版ハンバーガーメニュー -->
5            <div class="sp-menu">
6                <span class="material-icons" style="color:white; background-color: gray;" id="open">menu</span>
7            </div>
8
9            <!-- ハンバーガーメニュー押下時のメニュー -->
10            <div class="overlay">
11                <span class="material-icons" style="color:white; background-color: gray;" id="close">close</span>
12                <nav>
13                <ul >
14                    <li ><a href="#header" onclick="myFunction()">Top</a></li>
15                    <li><a href="#profile" onclick="myFunction()">Profile</a></li>
16                    <li onclick="myFunction()"><a href="#skillset">Skillset</a></li>
17                    <li onclick="myFunction()"><a href="#works">Works</a></li>
18                    <li onclick="myFunction()"><a href="#contact">Contact</a></li>               
19                </ul>
20                </nav>
21            </div>
22        </div>
23    </header>