javascriptでアイコンを開く方法

Question

私はウェブサイトを作成しています。ヘッダーのナビゲーションバーには、左側にロゴ、右側に他のページへのリンクがあり、ブラウザのサイズを小さくしてすべてのリンクがアイコンになるはずですが、ロゴは残ります。

アイコンをクリックすると、リンクの設定とアイコンがデフォルト設定に変更され、リンクが互いに下に表示されるようにします。like this（例：www.W3Schools.comから取得）。

誰かがこのエラーで私を助けてくれることを願っています。

ありがとうございます。

<div class="slideshow_nav"> 
      <div class="navbar-wlogo"> 
      <img src="/Users/yanikwick/Documents/canvas_website/logo.png" alt="logo" class="logo "width = "175px"> 
      <nav class="topnav" id="myTopnav"> 
       <a href="/html/contact">CONTACT</a> 
       <a href="/html/about">ABOUT</a> 
       <a href="/html/portfolio">PORTFOLIO</a> 
       <a href="/html/">HOME</a> 
       <a href="javascript:void(0);" style="font-size:30px;" class="icon" onclick="myFunction()">&#9776;</a> 
      </nav> 
      </div> 

これはナビゲーションバーのhtmlです。

function myFunction() { 
    var x = document.getElementById("myTopnav"); 
    if (x.className === "topnav") { 
     x.className += " responsive"; 
     } else { 
     x.className = "topnav"; 
     } 
    } 

これはjavascriptです。

header .logo{ 


float: left; 
    margin: 0px; 
    padding: 10px 10px 5px 10px; 
} 

header .topnav{ 
    overflow: hidden; 
    margin-right: 20px; 
} 

header .topnav a{ 
    float: right; 
    display: block; 
    color: #f2f2f2; 
    text-align: center; 
    margin-top: 2%; 
    margin-bottom: 2%; 
    padding: 14px 16px; 
    text-decoration: none; 
    font-size: 17px; 
} 

.topnav .icon { 
    display: none; 
} 

.topnav a:hover { 
    background-color: #ddd; 
    color: black; 
} 

@media screen and (max-width: 600px){ 
    .topnav a:not(:last-child) {display: none;} 
    .topnav a.icon { 
    display: inline-block; 
     float: right; 
    } 

@media screen and (max-width: 600px) { 
    .topnav .responsive { 
    position: relative; 
    } 
    .topnav .responsive .icon { 
    float: right; 
    } 
    .topnav .responsive a{ 
    float: none; 
    display: block; 
    text-align: left; 
    } 
} 

CSS

あなたはこれで私を助けている場合、私はそれをお願い申し上げます。ありがとうございました。

Answer 1

問題は... .topnavが応答適用されます場合は、リンクの可視性を設定しないことを、

あるので、のようなもの：内部

.topnav.responsive a { 
    display:block; 
} 

：

@media screen and (max-width: 600px){ 
... 
} 

ここにjsbin;） http://jsbin.com/vupizuyeji/edit?html,css,js,output

Chee rio :)