Navbar Logo 下推其他 Navbar 链接答案

【问题标题】：Navbar Logo pushing down other Navbar LinksNavbar Logo 下推其他 Navbar 链接
【发布时间】：2020-04-15 14:45:19
【问题描述】：

我遵循 [https://www.youtube.com/watch?v=H4MkGzoACpQ] 上的 youtube 教程创建了一个响应良好的导航栏。

问题是当我尝试对其进行个性化并在导航左侧添加徽标时，在全屏查看时，它似乎将其他导航链接推离导航栏。

除此之外，当视口低于某个宽度时，汉堡图标周围似乎有一个可见的圆圈。

请帮我清理这个导航栏。非常感谢，我只是网页设计的初学者。

这里是徽标应该是什么的链接 - [https://www.google.com/search?q=rossnowlagh+surf+school+logo&sxsrf=ALeKk00Hg24OG5c7Wefc6jal-JyqLmB18Q:1586961567476&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjxpYHE1OroAhXXiVwKHQi3CEsQ_AUoAXoECAwQAw&biw=1440&bih=789#imgrc=36AEO3-lo_sGxM]

我在这里包含了我的 HTML、CSS 和 JS 代码...

const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");

hamburger.addEventListener("click", () => {
  navLinks.classList.toggle("open");
  links.forEach(link => {
    link.classList.toggle("fade");
  });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
}

nav {
  height: 12vh;
  background: #5b78c7;
}

#nav-logo
{
  padding-top: 5px;
  margin-left: 20px;
  height: 80px;
  width: 80px;
}

.nav-links {
  display: flex;
  list-style: none;
  width: 50%;
  height: 100%;
  justify-content: space-around;
  align-items: center;
  margin-left: auto;
}

.nav-links li a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

.landing {
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.landing h1 {
  margin: 100px;
  font-size: 50px;
  color: #ae5fce;
}

@media screen and (max-width: 768px) {
  .line {
    width: 30px;
    height: 3px;
    background: white;
    margin: 5px;
  }
  nav {
    position: relative;
  }

  .hamburger {
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 50%;
    transform: translate(-5%, -50%);
    z-index: 2;
  }

  .nav-links {
    position: fixed;
    background: #5b78c7;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    clip-path: circle(100px at 90% -10%);
    -webkit-clip-path: circle(100px at 90% -10%);
    transition: all 1s ease-out;
    pointer-events: none;
  }
  .nav-links.open {
    clip-path: circle(1000px at 90% -10%);
    -webkit-clip-path: circle(1000px at 90% -10%);
    pointer-events: all;
  }
  .landing {
    flex-direction: column;
  }
  .nav-links li {
    opacity: 0;
  }
  .nav-links li a {
    font-size: 25px;
  }
  .nav-links li:nth-child(1) {
    transition: all 0.5s ease 0.2s;
  }
  .nav-links li:nth-child(2) {
    transition: all 0.5s ease 0.4s;
  }
  .nav-links li:nth-child(3) {
    transition: all 0.5s ease 0.6s;
  }
  li.fade {
    opacity: 1;
  }
}

<!DOCTYPE html>
<html lang="en">
  <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="./style.css" />
    <title>Rossnowlagh Surf</title>
  </head>
  <body>
    <nav>
      <div class="hamburger">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
      <img id="nav-logo" src="img/rossnowlagh-logo.png">
      <ul class="nav-links">
        <li><a href="#">About</a></li>
        <li><a href="#">Packages</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <section class="landing">
      <img src="./circles.svg" alt="dots" />
      <h1>Dots</h1>
    </section>

    <script src="app.js"></script>
  </body>
</html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

这里发生的情况是您的导航徽标占用了空间，并且以破坏布局的方式将内容推离了屏幕。

可能有几种方法可以解决这个问题，包括使用 flexbox 并在其中为您的导航安排项目，但我认为以下选项对于您的任务可能是最简单的：

#nav-logo
 {
   padding-top: 5px;
   margin-left: 20px;
   height: 80px;
   width: 80px;
   position: absolute; // add this to take the logo out of the layout
   z-index: 5; // add this to keep the logo in front of the other content
 }

【讨论】：