项目组合导航栏：HTML、CSS、柔性框

vltsax25  于 2023-03-20  发布在  其他
关注(0)|答案(4)|浏览(115)

这是一个非常具体的问题

  • 我要你运行代码，在全窗口打开它。
  • 现在请检查下面的代码，并切换响应模式。
  • 现在，把尺寸变小，直到你能看到一个汉堡包。
  • 现在按一下汉堡包。好用吗？
  • 现在合上汉堡。
  • 在此移动的视图中，滚动至页面末尾。
  • 现在试着打开汉堡包。很可能它不会起作用。
  • 现在滚动到响应式移动的视图中页面顶部的下方，打开汉堡包，你应该可以看到一个像图片中一样的半菜单。

我不知道为什么或怎么会发生这种情况。有人能请reslove这个吗？任何帮助将不胜感激。

<!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>
css

4条答案

按热度按时间
nfzehxib

nfzehxib1#

我在你的@media (max-width: 800px)里面给你的navlinks设置了一个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>
赞(0）分享  回复(0）举报  2023-03-20
rhfm7lfc

rhfm7lfc2#

问题是你从来没有定义.navlinks的top属性。请检查代码片段。

<!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>
赞(0）分享  回复(0）举报  2023-03-20
vsikbqxv

vsikbqxv3#

只需将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>
赞(0）分享  回复(0）举报  2023-03-20
zdwk9cvp

zdwk9cvp4#

请在.navlink类中添加CSS属性。我已经添加了“top：90 px;“。当应用位置固定到任何元素时，添加特定的两侧值，如左和上，或上和右，或右和下，或左和下。

.navlinks {
    position: fixed;
    width: 100%;
    height: 100vh;
    text-align: center;
    transition: all 0.5s;
    right: -100%;
    top: 90px;
    background: #222831;
}
赞(0）分享  回复(0）举报  2023-03-20
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com