NextJS+TailwindCSS移动端导航激活时Logo与汉堡按钮上移问题

核心问题分析 #

你的导航栏外层容器设置了固定高度h-24，同时启用flex-wrap，当移动端菜单展开后，总内容高度超过固定高度，flex布局会自动压缩上方的Logo和汉堡按钮区域，导致它们被上推。另外菜单使用的w-screen会超出父容器边界，进一步打乱布局结构。

修改后的完整代码 #

"use client";
import React, { useState } from "react";
import Link from "next/link";

const Navbar = () => {
  const [active, setActive] = useState(false);

  function toggleNav() {
    setActive(!active);
  }

  return (
    <div className="bg-gray-800">
      <div className="max-w-7xl px-6 m-auto items-center flex justify-between flex-wrap md:flex-nowrap py-4">
        {/* Logo */}
        <div className="flex flex-col flex-1 order-1">
          <p className="text-white font-black text-3xl">NSTK</p>
        </div>

        {/* Hamburger Menu */}
        <div
          className="hamburger-menu md:hidden block space-y-1 order-2"
          onClick={toggleNav}
        >
          <div className="h-1 w-6 bg-white rounded-lg"></div>
          <div className="h-1 w-6 bg-white rounded-lg"></div>
          <div className="h-1 w-6 bg-white rounded-lg"></div>
        </div>

        {/* List */}
        <div
          className={
            active
              ? "flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 bg-gray-800 w-full p-5 order-3 border-t border-gray-700"
              : "hidden md:flex md:flex-row md:space-y-0 md:space-x-4 order-3"
          }
        >
          <Link href="/">
            <p className="text-white/80 hover:text-white/90 transition-all duration-300">
              Home
            </p>
          </Link>
          <Link href="/">
            <p className="text-white/80 hover:text-white/90 transition-all duration-300">
              Home
            </p>
          </Link>
          <Link href="/">
            <p className="text-white/80 hover:text-white/90 transition-all duration-300">
              Home
            </p>
          </Link>
          <Link href="/">
            <p className="text-white/80 hover:text-white/90 transition-all duration-300">
              Home
            </p>
          </Link>
        </div>
      </div>
    </div>
  );
};

export default Navbar;

关键修改点说明 #

1. 替换固定高度为自适应内边距：将外层容器的h-24改为py-4，让导航栏高度随内容自动调整，避免内容超出后挤压上方元素。
2. 设置flex项排序规则：给Logo加order-1、汉堡按钮加order-2、菜单加order-3，确保移动端菜单展开后自动换行到最底部，不会与上方元素挤在同一行。
3. 修正菜单宽度：把菜单激活状态的w-screen改为w-full，让菜单宽度继承父容器的max-w-7xl和内边距，避免超出视口范围。
4. 添加视觉分隔：给激活的菜单添加border-t border-gray-700，区分导航栏主体与展开的菜单，提升界面层次感。

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