如何修复隐藏的导航栏？

Question

因此，我创建了一个看起来不错的简单导航。 但是我很难使其移动友好。 对于基础，我使用了CodePen中的代码。

当我开始在其上构建页面时，我意识到页面已加载到手机上。 然后，我在屏幕上用胶带（隐藏<li>的地方）贴到网站的某个部分。 后来我意识到这不是真正隐藏的导航。 但是，当您打开和关闭导航栏时，隐藏的<li>就会真正被隐藏。

这是我建立的网站（on CodePen）。

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
}

body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100vh;
      font-family: 'Poppins', sans-serif;
      font-weight: 400;
      background: #444;
      background-position: center;
      background-size: cover;
}

h1{
    text-transform: uppercase;
    padding: 1.5rem 0 1.2rem 0;
    font-weight: bolder;
    font-size: 20px;
}
h2{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 15px;
    margin: 0;
}

p{
    padding: 0;
    margin: 0;
    color: #DDD;
    font-size: 15px;
}

img{
    max-height: 350px;
    max-width: 350px;
    width: 100%;
    display: block;
    vertical-align: middle;
    text-align: center;
}

.space{
    padding-bottom: 4rem;
}

.container{
    width: 80%;
    margin: 0 auto 3rem auto;
    color: #fff;
}

.clear{
    position: inherit;
    top: 0;
    left: 0;
    height: 8rem;
    margin: 0;
}

.fixed{
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 6rem;
    background: #fff;
    z-index: 999;
}

nav{
    width: 70%;
    margin: 25px auto;
    padding: 0;
}

.logo {
      float: left;
      padding: 0;
      margin-top: 16px;
}

.logo a {
      color: #000;
      text-transform: uppercase;
      font-weight: 900;
      font-size: 18px;
      letter-spacing: 0px;
      text-decoration: none;
}

nav ul {
      float: right;
}

nav ul li {
    display: inline-block;
    float: left;
    margin-right: 20px;
}

nav ul li:last-child {
      margin-right: 0;
}

nav ul li a {
      display: inline-block;
      outline: none;
      color: #000;
      text-transform: uppercase;
      text-decoration: none;
      font-size: 14px;
      letter-spacing: 1.2px;
      font-weight: 600;
}

@media screen and (max-width: 864px) {

      .nav-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -999;
            background: #000;
            opacity: 0;
            transition: all 0.2s ease-in-out;
      }

      .nav-wrapper ul {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            padding: 0 20% 0 0;
      }

      .nav-wrapper ul li {
            display: block;
            float: none;
            width: 100%;
            text-align: right;
            margin-bottom: 10px;
      }

      .nav-wrapper ul li:nth-child(1) a {
            transition-delay: 0.2s;
      }

      .nav-wrapper ul li:nth-child(2) a {
            transition-delay: 0.3s;
      }

      .nav-wrapper ul li:nth-child(3) a {
            transition-delay: 0.4s;
      }

      .nav-wrapper ul li:nth-child(4) a {
            transition-delay: 0.5s;
      }

      .nav-wrapper ul li:nth-child(5) a {
            transition-delay: 0.6s;
      }

      .nav-wrapper ul li:nth-child(6) a {
            transition-delay: 0.7s;
      }

      .nav-wrapper ul li:not(:first-child) {
            margin-left: 0;
      }

      .nav-wrapper ul li a {
            padding: 10px 24px;
            opacity: 0;
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1.2px;
            transform: translateX(-20px);
            transition: all 0.2s ease-in-out;
      }

      .nav-btn {
            position: fixed;
            right: 13%;
            top: 30px;
            display: block;
            width: 48px;
            height: 48px;
            cursor: pointer;
            z-index: 9999;
            border-radius: 50%;
      }

      .nav-btn i {
            display: block;
            width: 20px;
            height: 2px;
            background: #000;
            border-radius: 2px;
            margin-left: 14px;
      }

      .nav-btn i:nth-child(1) {
            margin-top: 16px;
      }

      .nav-btn i:nth-child(2) {
            margin-top: 4px;
            opacity: 1;
      }

      .nav-btn i:nth-child(3) {
            margin-top: 4px;
      }
}

#nav:checked + .nav-btn {
      transform: rotate(45deg);
}

#nav:checked + .nav-btn i {
      background: #fff;
      transition: transform 0.2s ease-in-out;
}

#nav:checked + .nav-btn i:nth-child(1) {
      transform: translateY(6px) rotate(180deg);
}

#nav:checked + .nav-btn i:nth-child(2) {
      opacity: 0;
}

#nav:checked + .nav-btn i:nth-child(3) {
      transform: translateY(-6px) rotate(90deg);
}

#nav:checked ~ .nav-wrapper {
      z-index: 9990;
      opacity: 1;
}

#nav:checked ~ .nav-wrapper ul li a {
      opacity: 1;
      transform: translateX(0);
}

.times{
    margin: 2rem 0 2rem 0;
    width: 100%;
    height: auto;
    padding: 0;
    background:#111;
    color:#fff;
    text-align: center;    
}

@media screen and (min-width: 500px){
    .times{
        max-width: 100%;
    }
    .times h1{
        padding: 1.5rem 0 0 0;
    }
    .times .space{
        padding-bottom: 2rem;
    }
}

@media screen and (min-width: 600px){
    .times .space:first-child{
        display: inline-block;
        padding-right: 2rem;
    }
}

@media screen and (min-width: 800px){
    .times .space{
        padding-right: 0;
    }
    .times{
        margin-top: 0;
        height: auto;
    }
}

.img01{
    height: 250px;
    width: 100%;
    margin-bottom: 2rem;
    background: url(../images/barber-01.png) center center no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}

.img02{
    height: 250px;
    width: 100%;
    margin-bottom: 2rem;
    background: url(../images/barber-02.png) center center no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}

.img03{
    min-height: 300px;
    height: 100%;
    width: 100%;
    margin-bottom: 2rem;
    background: url(../images/yt.gif) center center no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}

@media screen and (min-width: 600px){
    .img01, img02, img03{
        height: 150px;
    }
}

.video-container {
    position: relative;
    padding-bottom: 62.25%;
    padding-top: 0px;
    overflow: hidden;
    margin-bottom: 2rem;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}    

.img-bg, .sec-01, .sec-02{
    margin-bottom:2rem;
    max-width: 350px;
    width: auto;
    max-height: 350px;
    height: auto;
    padding: 0;
    background:#111;
    color:#fff;
    text-align: center;
}

@media screen and (min-width: 500px){
    .img-bg{
        max-width: 100%;
    }
}

@media screen and (min-width: 600px){
    .img-bg{
        max-width: 45%;
    }
}

.sec-02{
    text-align: left;
    padding: 0 2rem 2rem 2rem;
}

.sec-02 p{
    padding-bottom: 2rem;
}

.logo-bg{
    width: 100%;
    padding-bottom: 1rem;
    background: url(../images/logo-bg.png) center center no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}

.logo-bg img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width: 500px){
    .logo-bg{
        max-width: 100%;
        width: 100%;
    }
}

.follow{
    margin-bottom:2rem;
    width: 100%;
    height: auto;
    padding: 0;
    background-color:#111;
    color:#fff;
    text-align: center;    
}

.follow a, .follow a:link, .follow a:visited{
    color: #fff;
}

@media screen and (min-width: 500px){
    .follow{
        width: 100%;
        max-width: 100%;
    }
    .follow h1{
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .follow p{
        display: none;
    }
    .follow .space{
        margin-right: 100px;
        display: inline-block;
        padding-bottom: 2rem;
    }
    .follow .space:last-child{
        margin: 0;
    }
}

.social{
    text-align: center;
}

.icon{
    font-size: 4em;
}

.welcome, .service, .price{
    margin-bottom:2rem;
    width: 100%;
    height: auto;
    padding: 0 2rem 2rem 2rem;
    background-color:#111;
    text-align: center;
    color: #fff;
}

.welcome p{
    color: #fff;
}
.welcome p{
    font-size: 20px;
}

.shop{
    background: #fff;
    margin-bottom:2rem;
    width: 100%;
    height: auto;
    padding: 0 2rem 2rem 2rem;
    text-align: center;
    color: #000;
}

.shop p{
    color: #111;
}

@media screen and (min-width: 800px){
    .welcome{
        height: auto;
    }
}

.service h1, .price h1{
    text-align: left;
}

.service h2, .price h2{
    color: #fff;
    text-align: left;
    padding-bottom: 0.5rem;
}

.service p{
    color: #fff;
    text-align: left;
}

.price p{
    color: #fff;
    text-align: left;
}

.price p{
    font-size: 14px;
    text-align: center;
}

table{
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: inherit;
    width: 100%;
}

tr{
    display: table-row;
    vertical-align: middle;
    border-color: inherit;
}

td{
    vertical-align: middle;
    display: table-cell;
    border-bottom: 1px solid #fff;
}

.left{
    width: 100%;
    text-align: left;
}
.right{
    width: 1%;
    text-align: right;
}

.about{
    margin-bottom:2rem;
    width: 100%;
    height: 100%;
    padding: 0 2rem 2rem 2rem;
    background-color:#111;
    text-align: center;  
}

.about p{
    text-align: left;
}

@media screen and (min-width: 500px){
    .about{
        width: 100%;
        max-width: 100%;
    }
}

.contact{
    margin-bottom:2rem;
    max-width: 100%;
    width: auto;
    height: 100%;
    padding: 0 2rem 2rem 2rem;
    background-color:#111;
    text-align: center;  
}

.contact p{
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.info{
    margin-bottom: 2rem;
}

.info p {
    font-size: 0.75em;;
    margin-bottom: 1rem;
}

@media screen and (min-width: 400px){
    .info p{
        font-size: 15px;
    }
}

.form{
    margin-bottom: 2rem;
}

.form h2{
    font-size: 20px;
}

form {
    margin:0 auto;
    width: 100%;
}

/* Style the text boxes */
input, textarea {
    display: inherit;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    width: -webkit-fill-available;
    min-width:100%;
    background:#efefef;
    border:1px solid #dedede;
    padding:10px;
    margin-top:0.8rem;
    font-size:0.9em;
    color:#3a3a3a;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
textarea {
    max-width: 10px;
	min-height:10rem;
    height: auto;
}
input:focus, textarea:focus {
    border:1px solid #444;
}
#submit {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    text-align: center;
    width:100%;
    height:auto;
    border:none;
    margin-top:20px;
    cursor:pointer;
    background: #111;
    color: #fff;
    border: 2px solid #fff;
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    -o-transition: background 0.3s ease-in-out;
    transition: background 0.3s ease-in-out;

}

	#submit:hover {
        background: #efefef;
        color: #111;
        border: 2px solid #111;   
	}

.maps{
    margin: 0;
    height: 14rem;
}

.stroke{
    height: 2px;
    width: 100%;
    background: #efefef;
    margin-bottom: 2rem;
}

@media screen and (max-width: 400px){
    .price b{
        font-size: 13px;
    }
}


@media screen and (min-width: 800px){
    .stroke:last-child{
        margin-bottom: 0;
        margin-top: 2rem;
    }
    .wrapper{
        height: 100%;
        margin: 2rem 0 2rem 0;
        display: flex;
    }
    .first-w{
        vertical-align: top;
        display: inline-block;
        margin-right: 2rem;
        flex: 1;
        background: #fff;
    }

    .second-w{
        vertical-align:top;
        display: inline-block;
        flex: 1;
        background: #fff;
    }
    .first-b{
        vertical-align: top;
        display: inline-block;
        margin-right: 2rem;
        flex: 1;
        background: #111;
    }

    .second-b{
        vertical-align:top;
        display: inline-block;
        flex: 1;
        background: #111;
    }
    .times, .welcome{
        margin-bottom: 1rem;
    }
    .about, .service, .price{
        background: none;
        margin-bottom: 0;
    }
    .maps{
        height: 100%;
    }
    .form{
        margin-bottom: 0;
    }
}

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="css/master.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
    
    <script src="jquery-2.1.0.min.js"></script>
    <script src="app.js"></script>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
  $(document).ready(function(){
    // Add smooth scrolling to all links
    $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== 0) {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
        $('html, body').animate({
          scrollTop: $(hash).offset().top - 122
        }, 800, function() {

          // Add hash (#) to URL when done scrolling (default click behavior)
          //window.location.hash = hash;
          history.pushState(null, null, hash);
        });
    } // End if
  });
});
    </script>
    
    <!-- Standard Favicon -->
    <link rel="icon" type="image/png" href="fav.png" />
    <!-- For iPhone 4 Retina display: -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="114-fav.png">
    <!-- For iPad: -->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="72-fav.png">
    <!-- For iPhone: -->
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="57-fav.png">
</head>
<body>
    <div class="container">
        <div class="fixed">
            <nav class="nav">
                <input type="checkbox" id="nav" style="display: none">
                    <label for="nav" class="nav-btn" onclick="myFunction()">
                        <i></i>
                        <i></i>
                        <i></i>
                    </label>
                <div class="logo">
                    <a>MENU</a>
                </div>
                
                <div class="nav-wrapper" id="nav-wrapper">
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#service">Service</a></li>
                        <li><a href="#price">Price</a></li>
                        <li><a href="#shop">Shop</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
            </nav>
        </div>
        <div class="clear" id="home"></div>
        <div class="logo-bg">
            <div><img src="images/logo.png" alt="Logo"></div>
        </div>
        <div class="wrapper">
            <div class="first-b">
                <div class="times">
                    <div><h1>Times</h1><br></div>
                    <div class="space">
                        <h2>Text &nbsp;&amp;&nbsp; Text</h2>
                        <p>Text</p>
                    </div>
                    <div class="space">
                        <h2>Text - Text</h2>
                        <p>Text UUR - Text UUR</p>
                    </div>
                </div>
            </div>
            <div class="second-b">
                <div class="welcome">
                    <div><h1>WELKOM</h1></div>
                    <div><p>Text</p></div>
                </div>
            </div>
        </div>
        <div class="img01"></div>
        <div class="wrapper">
            <div class="first-b">
                <div class="about" id="about">
                    <div><h1>Text</h1></div>
                    <div>
                        <p>Text</p>
                    </div>
                </div>
            </div>

            <div class="second-b">
                <div class="follow">
                    <div><h1>Text</h1><br></div>
                    <div class="space">
                        <a href="#" onclick="window.open(this.href,'_blank');return false;">
                            <div class="icon"><i class="fab fa-facebook-f"></i></div>
                            <p>#Text</p>
                        </a>
                    </div>
                    <div class="space">
                        <a href="#" onclick="window.open(this.href,'_blank');return false;">
                            <div class="icon"><i class="fab fa-instagram"></i></div>
                            <p>@Text</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="img02"></div>
        <div class="wrapper">
            <div class="first-b">
                <div class="service" id="service">
                    <div><h1>Text</h1></div>
                    <div>
                        <p>Text</p>
                        <p>&nbsp;</p>
                        <h2><i class="fas fa-star"></i> - Text</h2>
                        <h2><i class="fas fa-star"></i> - Text</h2>
                        <h2><i class="fas fa-star"></i> - Text</h2>
                        <h2><i class="fas fa-star"></i> - Text</h2>
                        <h2><i class="fas fa-star"></i> - Text</h2>
                        <h2><i class="fas fa-star"></i> - Text</h2>
                    </div>
                </div>
            </div>

            <div class="second-b">
                <div class="price" id="price">
                    <div><h1>Text</h1></div>
                    <div>
                        <table> 
                            <tr>
                                <td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
                                <td class="right">&euro;</td>
                                <td class="right">99</td>
                            </tr>
                            <tr>
                                <td class="left"><i class="fas fa-cut"></i><b> - Text &amp; Text</b></td>
                                <td class="right">&euro;</td>
                                <td class="right">99</td>
                            </tr>
                            <tr>
                                <td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
                                <td class="right">&euro;</td>
                                <td class="right">99</td>
                            </tr>
                            <tr>
                                <td class="left"><i class="fas fa-cut"></i><b> - Text &amp; Text</b></td>
                                <td class="right">&euro;</td>
                                <td class="right">99</td>
                            </tr>
                            <tr>
                                <td class="left"><i class="fas fa-cut"></i><b> - Text &nbsp;<sup>t/m Text</sup></b></td>
                                <td class="right">&euro;</td>
                                <td class="right">99</td>
                            </tr>
                            <tr>
                                <td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
                                <td class="right">&euro;</td>
                                <td class="right">99</td>
                            </tr>
                            <tr>
                                <td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
                                <td class="right">&euro;</td>
                                <td class="right">99</td>
                            </tr>
                            <tr>
                                <td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
                                <td class="right">&euro;</td>
                                <td class="right">99</td>
                            </tr>
                            <tr>
                                <td class="left"><i class="fas fa-cut"></i><b> - Text</b></td>
                                <td class="right">&euro;</td>
                                <td class="right">99</td>
                            </tr>
                        </table>
                    </div>
                    <div>&nbsp;</div>
                    <div><i><p>Text</p><p>Text</p></i></div>
                </div>
            </div>
        </div>
        <div class="wrapper">
            <div class="first-w">
                <a href="#" onclick="window.open(this.href,'_blank');return false;">
                    <div class="img03"></div>
                </a>
            </div>
            <div class="second-w">
                <div class="shop" id="shop">
                    <div><h1>Text</h1></div>
                    <div>
                        <h2>Text</h2>
                    </div>
                    <div><i><p>... Comming Soon ...</p></i></div>
                </div>
            </div>
        </div> 
        <div class="contact" id="contact">
            <div><h1>CONTACT</h1></div> 
            <div class="wrapper">
                <div class="first-b">
                    <div class="info">
                        <div><h2>Adres</h2><p>Text Text<br>Text Text</p></div>
                        <div><h2>Tel.Nr.</h2><p>Text</p></div>
                        <div><h2>Email</h2><p>Text</p></div>
                    </div>
                    <div class="stroke"></div>
                    <div class="form">
                        <div><p><i>Text</i></p></div>
                        <div><h2>CONTACT FORMULIER</h2></div>
                        <form id="ajax-contact" method="post" action="mail.php">
                            <input type="text" id="name" name="name" placeholder="Text" required>
                            <input type="email" id="email" name="email" placeholder="Text" required>
                            <textarea id="message" name="message" placeholder="Text" required></textarea>
                            <input id="submit" name="submit" type="submit" value="Verzenden">
                        </form>
                        <h1><div id="form-messages"></div></h1>
                    </div>
                    <div class="stroke"></div>
                </div>
                <div class="second-b">
                    <div class="maps">
                        <iframe src="https://www.google.com/maps/embed?pb=#" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
                    </div>
                </div>
            </div>            
        </div>
    </div>
    <script>
        function myFunction() {
            var x = document.getElementById("nav-wrapper");
            if (x.style.display === "block") {  //Show
                x.style.display = "none";       //Hide
            } else {
                x.style.display = "block";      //Show
            }
        }
    </script>
</body>
</html>