如何让响应式Topnav中间的圆形Logo向下延伸出导航栏？

要实现Logo向下延伸出导航栏的效果，核心是取消导航栏的overflow:hidden限制，通过绝对定位把Logo固定在导航栏中间，同时调整其位置使其向下突出。以下是具体修改方案：

1. 调整HTML结构 #

将导航链接分为左右两组，为Logo链接和图片添加专属类名，方便精准控制样式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!--NAVIGATION BAR-->
  <div class="topnav" id="myTopnav">
    <div class="nav-left">
      <a href="#schedule">Schedule</a>
      <!-- 可添加更多左侧导航链接 -->
    </div>
    <a href="#home" class="logo-link">
      <img src="files/img.jpg" class="logo-img" alt="Logo">
    </a>
    <div class="nav-right">
      <a href="#contact">Contact</a>
      <!-- 可添加更多右侧导航链接 -->
    </div>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
  </div>

  <script>
    function myFunction() {
      var x = document.getElementById("myTopnav");
      if (x.className === "topnav") {
        x.className += " responsive";
      } else {
        x.className = "topnav";
      }
    }
  </script>
</body>
</html>

2. 修改CSS样式 #

基础导航栏样式 #

• 移除overflow:hidden，避免截断超出的Logo
• 使用Flex布局实现左右导航均匀分布
• 通过绝对定位将Logo固定在导航栏中间，并设置向下偏移量

.topnav {
  position: relative; /* 作为Logo绝对定位的参考容器 */
  background-color: rgb(9, 120, 128);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

/* 左右导航组容器 */
.nav-left, .nav-right {
  display: flex;
}

.topnav a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

.topnav a:hover {
  background-color: #555;
  color: white;
}

/* Logo专属样式 */
.logo-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  padding: 0; /* 移除默认padding避免影响Logo位置 */
}

.logo-img {
  width: 80px; /* 自定义Logo大小 */
  height: 80px;
  border-radius: 50%; /* 实现圆形效果 */
  border: 4px solid rgb(9, 120, 128); /* 添加与导航栏同色边框，增强衔接感 */
  background-color: #fff; /* 根据Logo需求设置背景色 */
  position: relative;
  top: 20px; /* 控制向下延伸的距离，可按需调整 */
}

响应式适配（移动端） #

在小屏幕下调整布局，取消Logo的向下延伸，改为垂直排列导航链接：

/* 屏幕宽度小于600px时的样式 */
@media screen and (max-width: 600px) {
  .nav-left, .nav-right {
    display: none;
  }
  .logo-link {
    position: static;
    transform: none;
  }
  .logo-img {
    top: 0; /* 取消向下延伸 */
    width: 50px;
    height: 50px;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
  }
  .topnav.responsive .nav-left,
  .topnav.responsive .nav-right {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 10px;
  }
  .topnav.responsive .logo-link {
    align-self: center;
    margin: 10px 0;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 16px;
    top: 14px;
  }
}

关键说明 #

• position: relative与position: absolute组合：让Logo相对于导航栏定位，不受其他导航链接布局影响
• transform: translateX(-50%)：确保Logo在导航栏正中间，即使Logo大小变化也能保持居中
• border-radius: 50%：实现圆形Logo效果，若你的Logo本身是圆形，可省略或调整该值
• 移动端取消Logo向下延伸：避免在小屏幕下占用过多垂直空间，保证布局紧凑

内容的提问来源于stack exchange，提问作者ssmith4299