我目前正在为一个网站开发一个响应式导航栏,我面临着一个问题,当移动的导航菜单被激活时,徽标和汉堡按钮会被推起来。(我使用NextJS和TailwindCSS btw)
代码如下:
"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 h-24 m-auto items-center flex justify-between flex-wrap md:flex-nowrap">
{/* Logo */}
<div className="flex flex-col flex-1">
<p className="text-white font-black text-3xl">NSTK</p>
</div>
{/* Hamburger Menu */}
<div
className="hamburger-menu md:hidden block space-y-1"
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-screen p-5 transform-y-0"
: "hidden md:flex md:flex-row md:space-y-0 md:space-x-4"
}
>
<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;
可能相关的图片:How it looks when the Navbar is closedHow it looks when the Navbar is activated
对不起,如果这个问题写得不好,这是我在Stackoverflow上的第一篇文章。
我曾尝试使用flex-wrap将导航栏放在移动设备上的单独一行,但它似乎并不像预期的那样工作。当注意到它推高了其他2个div时,我试着给它一个边际顶部,因为我认为边际可能会导致问题,这也没有解决它。所以现在我希望在这里得到解决方案。
2条答案
按热度按时间tzxcd3kk1#
你在父div中使用
h-24
类固定了高度,当你在移动的上打开导航时,它会试图挤压内容。您可以将其更改为
md:h-24
,因此在较小的屏幕上高度将为auto
。这里是codesanbox link和preview link。
zi8p0yeb2#
您可以尝试将列表div从导航栏div中取出: