移动端汉堡菜单显示及样式异常：CSS与JS调试求助

云上老周

2026-7-14

移动端汉堡菜单修复方案

问题根源

重复定义.social-links样式，导致移动端布局与过渡效果冲突
移动端菜单定位错误，结合right:5%与固定宽度导致显示偏移，背景样式未正常生效
nav-active类优先级不足，无法覆盖默认的transform属性
菜单内部元素布局混乱，链接间距、对齐逻辑不符合预期

修复后的完整代码

HTML

<header class="header">
  <nav class="navbar">
    <a href="/" class="logo">Your Logo/Name</a>

    <div class="nav-links">
      <a href="/blog/"><i class="fa-regular fa-newspaper fa-xl"></i></a>
      <a href="/projects/"><i class="fa-solid fa-code fa-xl"></i></a>
    </div>

    <div class="social-links">
      <div class="mobile-nav-links">
        <a href="/blog/"><i class="fa-regular fa-newspaper fa-xl"></i></a>
        <a href="/projects/"><i class="fa-solid fa-code fa-xl"></i></a>
      </div>

      <a href="https://x.com/yourusername" target="_blank">
            <i class="fa-brands fa-x-twitter"></i>
          </a>
      <a href="https://github.com/yourusername" target="_blank">
            <i class="fa-brands fa-github"></i>
          </a>
    </div>

    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>
  </nav>
</header>

<main>
  <section class="intro" style="text-align: left;">
    <h1 style="font-size: 22px;"> Based in my country, I'm passionate about building apps and tools that truly serve users. Currently learning, improving, and coming up with new ideas every day, and blogging about tech.</h1>
  </section>

  <div class="info-grid" style="text-align: left;">
    <div class="info-col">
      <p class="info-heading">Experience:</p>
      <p>Independent iOS & Web Developer</p>
      <p>Swift, SwiftUI, Python, HTML/CSS/JS</p>
    </div>

    <div class="info-col" style="text-align: left;">
      <p class="info-heading">Currently:</p>
      <p>Building iOS apps with SwiftUI</p>
      <p>Open to internships &amp; junior roles</p>
    </div>

    <div class="info-col" style="text-align: left;">
      <p class="info-heading">About this site:</p>
      <p>This site is built using raw HTML, CSS, and a bit of JavaScript, to showcase my skills in front-end, projects I'm working on, and blog posts.</p>
    </div>
  </div>
</main>

<footer>
  <p>Designed by Your Name • Made in the Country</p>
  <p>&copy; <script>
      document.write(new Date().getFullYear());
    </script>
  </p>
</footer>
<script src="app.js"></script>

CSS

/* RESET */
html,
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* BODY */
body {
  font-family: system-ui, -apple-system, sans-serif;
  background-color: #2e2e2e;
  color: #f5f5f5;
  line-height: 1.6;
  overflow-y: auto;
}

/* FOOTER */
footer {
  background-color: #1f1f1f;
  padding: 0.9rem 2rem;
  text-align: center;
}

/* GLOBAL LINKS */
a {
  color: #f5f5f5;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #949292;
}

/* HEADER */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #1f1f1f;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  flex-wrap: wrap;
}

/* NAVBAR */
.navbar {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
  position: relative; /* 作为绝对定位元素的父容器 */
}

/* Site name / logo */
.logo {
  font-size: 1.5rem;
  font-weight: bolder;
  position: absolute;
  left: 5%;
}

/* Nav page links — desktop */
.nav-links {
  display: flex;
  justify-content: center;
  gap: 3rem;
  padding-left: 435px;
  align-items: center;
}

.mobile-nav-links {
  display: none;
}

.mobile-nav-links a i {
  font-size: 1.8rem;
}

/* Social icons — base style */
.social-links {
  font-size: 1.8rem;
  display: flex;
  gap: 1.8rem;
  position: absolute;
  right: 5%;
  transition: transform 0.3s ease-in;
}

/* Mobile: 默认隐藏菜单 */
@media screen and (max-width: 768px) {
  .social-links {
    transform: translateX(110%);
    position: fixed; /* 固定定位，避免随滚动移动 */
    top: 70px; /* 避开固定头部高度 */
    right: 0;
    background-color: #1f1f1f;
    flex-direction: column;
    align-items: center;
    width: 200px;
    padding: 1.5rem 1rem;
    gap: 1.5rem;
    box-shadow: -2px 0 5px rgba(0,0,0,0.3);
    z-index: 999;
  }
}

/* Desktop: 显示菜单 */
@media screen and (min-width: 769px) {
  .social-links {
    transform: translateX(0%);
  }
}

/* MAIN CONTENT */
main {
  margin: 80px auto 4rem;
  max-width: 800px;
  padding: 1.5rem;
  min-height: calc(100vh - 80px);
}

/* INTRO SECTION */
.intro h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.intro p {
  font-size: 1.05rem;
  max-width: 640px;
  margin-bottom: 1rem;
  line-height: 1.75;
}

/* BLOG POST BODY TEXT */
.blog-post p {
  margin-bottom: 1em;
  line-height: 1.6;
}

/* RECENT POSTS HEADING */
.recent-posts h2 {
  margin-bottom: 1.5rem;
}

/* PROJECT CARDS */
.project {
  background: #3a3a3a;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  transition: background 0.3s ease;
}

.project:hover {
  background: #4a4a4a;
}

.project-list {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}

.project-list li {
  background: #3a3a3a;
  margin-bottom: 3.5rem;
  padding: 1rem;
  border-radius: 6px;
  transition: background 0.3s ease;
}

.project-list li:hover {
  background: #4a4a4a;
}

.project-list a {
  color: #f5f5f5;
  font-weight: bold;
}

/* POST CARDS */
.post {
  background: #3a3a3a;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  transition: background 0.3s ease;
}

.post:hover {
  background: #4a4a4a;
}

.post-list {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}

.post-list li {
  background: #3a3a3a;
  margin-bottom: 3.5rem;
  padding: 1rem;
  border-radius: 6px;
  transition: background 0.3s ease;
}

.post-list li:hover {
  background: #4a4a4a;
}

.post-list a {
  color: #f5f5f5;
  font-weight: bold;
}

/* INFO GRID */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3em;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2.5px solid #3a3a3a;
}

.info-heading {
  font-weight: 600;
  text-transform: uppercase;
  color: #949292;
}

.info-col p {
  line-height: 1.6;
  margin-bottom: 0.4rem;
}

@media screen and (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* BURGER MENU ICON */
.burger {
  display: none;
  cursor: pointer;
  width: 25px;
  flex-shrink: 0;
}

.burger div {
  width: 100%;
  height: 3px;
  background-color: #f5f5f5;
  margin: 5px 0;
  transition: all 0.3s ease;
}

.burger:hover div {
  background-color: #949292;
}

/* MOBILE LAYOUT */
@media screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .logo {
    position: static;
    left: auto;
    padding-left: 5%;
  }

  .nav-links {
    display: none;
  }

  .mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    padding-bottom: 1rem;
    border-bottom: 1px solid #3a3a3a;
  }

  .mobile-nav-links a,
  .social-links a {
    justify-content: center;
  }

  /* Show burger icon on mobile */
  .burger {
    display: block;
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
  }

  /* 汉堡图标切换动画 */
  .burger.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
  }
  .burger.toggle .line2 {
    opacity: 0;
  }
  .burger.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
  }
}

/* NAV ACTIVE STATE */
.social-links.nav-active {
  transform: translateX(0%);
}

JavaScript

// 移动端汉堡菜单逻辑
const navSlide = () => {
  const burger = document.querySelector('.burger');
  const socialLinks = document.querySelector('.social-links');

  burger.addEventListener('click', (e) => {
    e.stopPropagation();
    socialLinks.classList.toggle('nav-active');
    burger.classList.toggle('toggle'); // 触发汉堡图标动画
  });

  document.addEventListener('click', (e) => {
    if (socialLinks.classList.contains('nav-active') && !socialLinks.contains(e.target) && !burger.contains(e.target)) {
      socialLinks.classList.remove('nav-active');
      burger.classList.remove('toggle');
    }
  });

  socialLinks.addEventListener('click', (e) => {
    e.stopPropagation(); // 点击菜单内部不关闭
  });
}

navSlide();

核心修复点

消除样式冲突：删除重复的.social-links定义，将移动端隐藏逻辑移至对应媒体查询内
修正菜单定位：移动端菜单改为fixed定位，贴右侧显示并避开固定头部，添加阴影增强视觉层次
提升激活态优先级：将nav-active改为.social-links.nav-active，确保能覆盖默认的transform属性
优化内部布局：给mobile-nav-links添加分隔边框，统一链接间距与对齐方式
增强交互反馈：添加汉堡图标切换动画，提升用户体验

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

移动端汉堡菜单显示及样式异常：CSS与JS调试求助

问题根源 #

修复后的完整代码 #

HTML #

CSS #

JavaScript #

核心修复点 #

问题根源

修复后的完整代码

HTML

CSS

JavaScript

核心修复点