レスポンシブデザインで広げた時はメニューの文字を見えなくしたい

広げた時はメニューの文字を見えなくしたい

発生している問題

広げた際にメニューの文字が見える

該当のソースコード

HTml
1<nav class="top-nav">
2      <ul id="menu">
3        <li class="hamburger"><a href="#"><i class="fa fa-bars">メニュー</i></a></li>
4        <li><a href="#" class="logo">会社名</a></li>
5        <li><a href="#" class="item">ホーム</a></li>
6        <li><a href="#" class="item">事業案内</a></li>
7        <li><a href="#" class="item">採用情報</a></li>
8        <li><a href="#" class="item">お問い合わせ</a></li>
9      </ul>
10    </nav>

css
1nav{
2  background-color: #FAF0E6;
3  color: black;
4}
5
6.top-nav ul{
7  display: flex;
8  margin: 0;
9  padding: 6px;
10  list-style-type: none;
11}
12
13.top-nav .logo{
14  font-size: 20px;
15}
16
17nav a{
18  display: block;
19  border-radius: 4px;
20  padding: 12px 24px;
21  color: black;
22  text-decoration: none;
23}
24
25nav li a:hover{
26  background-image: url(img/logo1.jpg);
27}
28
29/* 767px以下になったらこのcssが動作する */
30@media only screen and (max-width: 767px){
31  nav ul{
32    display: flex;
33    flex-direction: column;
34    margin: 0;
35    padding: 6px;
36    list-style-type: none;
37  }
38  nav li.hamburger{
39    align-self: flex-end;
40  }
41}