スマホ用画面でのメニューアイコンが表示できません

CSSで、スマホ用画面の時はヘッダーの上部にあるリストを非表示にし、その代わりにメニューアイコンを表示させたいです。
しかし、リストは非表示になったのですが、メニューアイコンがずっと表示されたままになってしまいます。
原因がわかる方、どこを変えたらいいのか教えけると幸いです。宜しくお願いします。
また、可能であればjqueryで実装する場合も教えていただきたいです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>###</title>
6    <link rel="stylesheet" type="text/css" href="style.css">
7    <link rel="icon" href="icon.jpg">
8    <script src="https://use.fontawesome.com/ec250f4b17.js"></script>
9    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
10    <script type="text/javascript" src="script.js" charset="utf-8"></script>
11
12
13
14    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.min.css">
15    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
16    <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
17    <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>
18
19
20
21
22
23</head>
24<body>
25   <!---------- ヘッダー --------->
26    <div class="header">
27        <h1>
28            <a href="http://otonavi.sakura.ne.jp/TOP.html">
29                <img src="###">
30            </a>
31        </h1>
32        <i class="fa fa-bars fa-3x menu-icon" aria-hidden="true"></i>
33        <div class="for-pc">
34            <nav>
35                <ul>
36                    <li class="header_item"><a href="">###</a></li>
37                    <li class="header_item"><a href="">###</a></li>
38                    <li class="header_item"><a href="">###</a></li>
39                </ul>
40            </nav>
41        </div>
42
43
44
45    </div>
46
47
48    <div class="main">
49     
50    </div>
51
52
53    <div class="footer">
54       
55    </div>
56</body>
57</html>

CSS
1
2.menu-icon{
3
4  float:right;
5
6  /* デフォルトではメニューアイコンを非表示にする */
7  display:none;
8
9}
10
11.header li{
12
13    width: 180px;
14    padding: 0px;
15    margin: 0px;
16    font-size: 15px;
17    color: #3d9ec7;
18    list-style: none;
19    text-align: center;
20}
21.header li :visited{
22    color: #3d9ec7;
23}
24.header_item{
25    display: inline;
26    float: right;
27}
28
29
30
31
32/* --- メディアクエリ --- */
33
34
35/* --- スマホ用 --- */
36@media all and (max-width: 670px) {
37
38  /* for-pcクラスのdisplayをnoneに指定*/
39.for-pc {
40display:none;
41  }
42
43
44/* menuクラスのdisplayをblockに指定  */
45.menu-icon{
46display:block;
47}
48
49}
50