组合导航栏：HTML、CSS、FLEXBOX答案

【问题标题】：Portfolio NavBar : HTML, CSS, FLEXBOX组合导航栏：HTML、CSS、FLEXBOX
【发布时间】：2022-01-03 11:34:45
【问题描述】：

所以，这是一个非常具体的问题：

我希望你运行代码，并在一个完整的窗口中打开它。
现在请检查以下代码，并切换响应模式。
现在，将尺寸改小一些，直到可以看到一个汉堡包。
现在单击汉堡包。工作正常吗？
现在关闭汉堡包。
在此移动视图中滚动到页面末尾。
现在尝试打开汉堡包。很可能它不会起作用。
现在滚动到响应式移动视图中页面顶部的正下方。这里打开汉堡。您应该能够看到像图片中那样出现故障的半菜单。

我不知道为什么或如何发生这种情况。有人可以重新喜欢这个吗？任何帮助将不胜感激。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Navbar</title>
    <link rel="stylesheet" href="styles/styles.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
    />

    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&family=Quicksand:wght@300&family=Roboto:wght@900&display=swap" rel="stylesheet">
    <style>

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");

@font-face {
  font-family: AstroSpace;
  src: url(/fonts/AstroSpace.ttf);
}

body {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  background-color: #212c3b;
}

header {
  background-color: #141b25;
  position: sticky;
  top: 0;
  right: 0;
  width: 100%;
}

.main-nav {
  height: 90px;
}

.logo {
  color: white;
  line-height: 90px;
  font-size: 30px;
  font-weight: 900  ;
  text-decoration: none;
  margin-left: 30px;
  font-family: "Roboto  ", sans-serif;
}

.navlinks {
  list-style: none;
  float: right;
  line-height: 90px;
  margin: 0;
  padding: 0;
}

.navlinks li {
  display: inline-block;
  margin: 0px 20px;
}

.navlinks li a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.3s linear 0s;
  text-transform: uppercase;
}

.navlinks li a:hover {
  color: #7ebcb9;
  padding-bottom: 7px;
  border-bottom: 2px solid #7ebcb9;
}

li a.contact {
  background-color: #00adb5;
  padding: 9px 20px;
  border-radius: 50px;
  transition: all 0.3s ease 0s;
  border-bottom: none;
}

li a.contact:hover {
  background-color: #047e85;
  color: white;
  border-bottom: none;
}

#check {
  display: none;
}

.menu-btn {
  font-size: 25px;
  color: white;
  float: right;
  line-height: 90px;
  margin-right: 40px;
  display: none;
  cursor: pointer;
}

@media (max-width: 800px) {
  .navlinks {
    top: 90px;
    position: fixed;
    width: 100%;
    height: 100vh;
    text-align: center;
    transition: all 0.5s;
    right: -100%;
    background: #222831;
  }

  .navlinks li {
    display: block;
  }

  .navlinks li a {
    font-size: 20px;
  }

  .navlinks li a:hover {
    border-bottom: none;
  }

  .menu-btn {
    display: block;
  }

  #check:checked ~ .navlinks {
    right: 0;
  }
}

@media (max-width: 360px) {
  .logo {
    margin-left: 10px;
    font-size: 25px;
  }

  .menu-btn {
    margin-right: 10px;
    font-size: 25px;
  }

  .menu-btn:focus {
    color: blue;
  }
}
    </style>
  </head>
  <body>
    <header>
      <nav class="main-nav">
        <input type="checkbox" id="check" />
        <label for="check" class="menu-btn">
          <i class="fas fa-bars"></i>
        </label>
        <a href="index.html" class="logo">Nikita Gada</a>
        <ul class="navlinks">
          <li><a href="#">About Me</a></li>
          <li><a href="#">Education</a></li>
          <li><a href="#">Work</a></li>
          <li><a href="#" class="contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus, 
  </body>
</html>

【问题讨论】：

标签： html css flexbox navbar portfolio

【解决方案1】：

我在您的navlinks 上的@media (max-width: 800px) 上设置了一个top : 80px，它似乎正在工作。看看吧。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Navbar</title>
    <link rel="stylesheet" href="styles/styles.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
    />

    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&family=Quicksand:wght@300&family=Roboto:wght@900&display=swap" rel="stylesheet">
    <style>

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");

@font-face {
  font-family: AstroSpace;
  src: url(/fonts/AstroSpace.ttf);
}

body {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  background-color: #212c3b;
}

header {
  background-color: #141b25;
  position: sticky;
  top: 0;
  right: 0;
  width: 100%;
}

.main-nav {
  height: 90px;
}

.logo {
  color: white;
  line-height: 90px;
  font-size: 30px;
  font-weight: 900  ;
  text-decoration: none;
  margin-left: 30px;
  font-family: "Roboto  ", sans-serif;
}

.navlinks {
  list-style: none;
  float: right;
  line-height: 90px;
  margin: 0;
  padding: 0;
}

.navlinks li {
  display: inline-block;
  margin: 0px 20px;
}

.navlinks li a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.3s linear 0s;
  text-transform: uppercase;
}

.navlinks li a:hover {
  color: #7ebcb9;
  padding-bottom: 7px;
  border-bottom: 2px solid #7ebcb9;
}

li a.contact {
  background-color: #00adb5;
  padding: 9px 20px;
  border-radius: 50px;
  transition: all 0.3s ease 0s;
  border-bottom: none;
}

li a.contact:hover {
  background-color: #047e85;
  color: white;
  border-bottom: none;
}

#check {
  display: none;
}

.menu-btn {
  font-size: 25px;
  color: white;
  float: right;
  line-height: 90px;
  margin-right: 40px;
  display: none;
  cursor: pointer;
}

@media (max-width: 800px) {
  .navlinks {
    position: fixed;
    /* line I added */
    top:90px;;
    width: 100%;
    height: 100vh;
    text-align: center;
    transition: all 0.5s;
    right: -100%;
    background: #222831;
  }

  .navlinks li {
    display: block;
  }

  .navlinks li a {
    font-size: 20px;
  }

  .navlinks li a:hover {
    border-bottom: none;
  }

  .menu-btn {
    display: block;
  }

  #check:checked ~ .navlinks {
    right: 0;
  }
}

@media (max-width: 360px) {
  .logo {
    margin-left: 10px;
    font-size: 25px;
  }

  .menu-btn {
    margin-right: 10px;
    font-size: 25px;
  }

  .menu-btn:focus {
    color: blue;
  }
}
    </style>
  </head>
  <body>
    <header>
      <nav class="main-nav">
        <input type="checkbox" id="check" />
        <label for="check" class="menu-btn">
          <i class="fas fa-bars"></i>
        </label>
        <a href="index.html" class="logo">Nikita Gada</a>
        <ul class="navlinks">
          <li><a href="#">About Me</a></li>
          <li><a href="#">Education</a></li>
          <li><a href="#">Work</a></li>
          <li><a href="#" class="contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus, 
  </body>
</html>

【讨论】：

我该怎么做，我是堆栈溢出的新手
你点击你得到的第一个正确答案旁边的复选按钮（它必须只有一个）。
好的，我做到了

【解决方案2】：

好吧，问题是你永远不会定义.navlinks 的top 属性。请检查sn-p。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Navbar</title>
    <link rel="stylesheet" href="styles/styles.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
    />

    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&family=Quicksand:wght@300&family=Roboto:wght@900&display=swap" rel="stylesheet">
    <style>

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");

@font-face {
  font-family: AstroSpace;
  src: url(/fonts/AstroSpace.ttf);
}

body {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  background-color: #212c3b;
}

header {
  background-color: #141b25;
  position: sticky;
  top: 0;
  right: 0;
  width: 100%;
}

.main-nav {
  height: 90px;
}

.logo {
  color: white;
  line-height: 90px;
  font-size: 30px;
  font-weight: 900  ;
  text-decoration: none;
  margin-left: 30px;
  font-family: "Roboto  ", sans-serif;
}

.navlinks {
  list-style: none;
  float: right;
  line-height: 90px;
  margin: 0;
  padding: 0;
}

.navlinks li {
  display: inline-block;
  margin: 0px 20px;
}

.navlinks li a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.3s linear 0s;
  text-transform: uppercase;
}

.navlinks li a:hover {
  color: #7ebcb9;
  padding-bottom: 7px;
  border-bottom: 2px solid #7ebcb9;
}

li a.contact {
  background-color: #00adb5;
  padding: 9px 20px;
  border-radius: 50px;
  transition: all 0.3s ease 0s;
  border-bottom: none;
}

li a.contact:hover {
  background-color: #047e85;
  color: white;
  border-bottom: none;
}

#check {
  display: none;
}

.menu-btn {
  font-size: 25px;
  color: white;
  float: right;
  line-height: 90px;
  margin-right: 40px;
  display: none;
  cursor: pointer;
}

@media (max-width: 800px) {
  .navlinks {
    position: fixed;
    width: 100%;
    height: 100vh;
    text-align: center;
    transition: all 0.5s;
    right: -100%;
    background: #222831;
    top: 90px;
  }

  .navlinks li {
    display: block;
  }

  .navlinks li a {
    font-size: 20px;
  }

  .navlinks li a:hover {
    border-bottom: none;
  }

  .menu-btn {
    display: block;
  }

  #check:checked ~ .navlinks {
    right: 0;
  }
}

@media (max-width: 360px) {
  .logo {
    margin-left: 10px;
    font-size: 25px;
  }

  .menu-btn {
    margin-right: 10px;
    font-size: 25px;
  }

  .menu-btn:focus {
    color: blue;
  }
}
    </style>
  </head>
  <body>
    <header>
      <nav class="main-nav">
        <input type="checkbox" id="check" />
        <label for="check" class="menu-btn">
          <i class="fas fa-bars"></i>
        </label>
        <a href="index.html" class="logo">Nikita Gada</a>
        <ul class="navlinks">
          <li><a href="#">About Me</a></li>
          <li><a href="#">Education</a></li>
          <li><a href="#">Work</a></li>
          <li><a href="#" class="contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus, 
  </body>
</html>

【讨论】：

谢谢你，虽然我的工作已经完成了，因为有人给出了答案

【解决方案3】：

只需将top: 90px; 添加到@media (max-width: 800px) { .navlinks {top: 90px;}}

<style>

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");

@font-face {
  font-family: AstroSpace;
  src: url(/fonts/AstroSpace.ttf);
}

body {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  background-color: #212c3b;
}

header {
  background-color: #141b25;
  position: sticky;
  top: 0;
  right: 0;
  width: 100%;
}

.main-nav {
  height: 90px;
}

.logo {
  color: white;
  line-height: 90px;
  font-size: 30px;
  font-weight: 900  ;
  text-decoration: none;
  margin-left: 30px;
  font-family: "Roboto  ", sans-serif;
}

.navlinks {
  list-style: none;
  float: right;
  line-height: 90px;
  margin: 0;
  padding: 0;
}

.navlinks li {
  display: inline-block;
  margin: 0px 20px;
}

.navlinks li a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.3s linear 0s;
  text-transform: uppercase;
}

.navlinks li a:hover {
  color: #7ebcb9;
  padding-bottom: 7px;
  border-bottom: 2px solid #7ebcb9;
}

li a.contact {
  background-color: #00adb5;
  padding: 9px 20px;
  border-radius: 50px;
  transition: all 0.3s ease 0s;
  border-bottom: none;
}

li a.contact:hover {
  background-color: #047e85;
  color: white;
  border-bottom: none;
}

#check {
  display: none;
}

.menu-btn {
  font-size: 25px;
  color: white;
  float: right;
  line-height: 90px;
  margin-right: 40px;
  display: none;
  cursor: pointer;
}

@media (max-width: 800px) {
  .navlinks {
    position: fixed;
    top: 90px;
    width: 100%;
    height: 100vh;
    text-align: center;
    transition: all 0.5s;
    right: -100%;
    background: #222831;
  }

  .navlinks li {
    display: block;
  }

  .navlinks li a {
    font-size: 20px;
  }

  .navlinks li a:hover {
    border-bottom: none;
  }

  .menu-btn {
    display: block;
  }

  #check:checked ~ .navlinks {
    right: 0;
  }
}

@media (max-width: 360px) {
  .logo {
    margin-left: 10px;
    font-size: 25px;
  }

  .menu-btn {
    margin-right: 10px;
    font-size: 25px;
  }

  .menu-btn:focus {
    color: blue;
  }
}
    </style>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Navbar</title>
    <link rel="stylesheet" href="styles/styles.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
    />

    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&family=Quicksand:wght@300&family=Roboto:wght@900&display=swap" rel="stylesheet">
    
  </head>
  <body>
    <header>
      <nav class="main-nav">
        <input type="checkbox" id="check" />
        <label for="check" class="menu-btn">
          <i class="fas fa-bars"></i>
        </label>
        <a href="index.html" class="logo">Nikita Gada</a>
        <ul class="navlinks">
          <li><a href="#">About Me</a></li>
          <li><a href="#">Education</a></li>
          <li><a href="#">Work</a></li>
          <li><a href="#" class="contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus, 
  </body>
</html>

【讨论】：

谢谢你，我已经收到答案了！

【解决方案4】：

请在 .navlink 类中添加 CSS 属性。我在这个类中添加了“top:90px;”。将位置固定应用于任何元素时，添加特定的两侧值，例如左侧和顶部、或顶部和右侧、或右侧和底部、或左侧和底部。

.navlinks {
    position: fixed;
    width: 100%;
    height: 100vh;
    text-align: center;
    transition: all 0.5s;
    right: -100%;
    top: 90px;
    background: #222831;
}

【讨论】：

ty，但我已经得到了答案