ブラケットファイルが機能しない

Question

ブラケットにslidenavを作成しましたが、これはうまくいきました。今度はそれを開き、もう動作しません。空白の画面が表示されます。コードの一部が消去されました。 、 何が起こった？これはCSSコード

* { 
    box-sizing: border-box; 
} 
html, body{ 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 
.nav{ 
    height: 60px; 
    background-color: aqua; 
    overflow:auto; 
    width: 100%; 
} 
.openbar div{ 
    height: 5px; 
    background-color: darkslategray; 
    margin: 4px 0; 
    border-radius: 25px; 
    overflow: auto; 
} 
.openbar{ 
    width: 30px; 
    display: block; 
    margin: 1.2em 0 0 1.2em;  
} 
.sidenav{ 
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 2; 
    top: 0; 
    left: 0; 
    background-color: mintcream; 
    transition: 0.5s; 
    overflow: hidden; 
} 
.sidenav a{ 
    color: darkslateblue; 
    font-family: gotham; 
    text-decoration: none; 
    display: block; 
    transition: 0.3s; 
    text-align: center; 
    font-size: 30px; 
    padding: 30px 0; 
    margin: 0 50px; 
} 
.sidenav a:nth-child(2){ 
    margin-top: 4em 
} 
.sidenav .closebtn{ 
    position: absolute; 
    top: 0; 
    margin: 20px 0 0 20px; 
    padding: 
} 
.sidenav a:hover{ 
    color: white; 
    background-color: aqua; 
    border-radius: 25px; 
} 

Answer 1

あなたのサイドバーにあなたのナビが移動しました。サイドバーの最後のdivをナビの上に戻しても、それはあなたが望むように機能するはずです。 https://jsfiddle.net/2gj3jh19/6/

<div class="wrapper"> 
    <div class="sidenav" id="main"> 
    <a href="#" class="closebtn">X</a> 
    <a href="#">CONTACT</a> 
    <a href="#">HOME</a> 
    <a href="#">CALL US</a> 
    <a href="#">EMAIL</a> 
    </div> 
    <div class="nav"> 
    <a href="#" class="openbar"> 
     <div class="line1"></div> 
     <div class="line2"></div> 
     <div class="line3"></div> 
    </a> 
    </div>