next.js 移动的导航推送徽标和汉堡包按钮的问题

sqyvllje 于 2023-05-17 发布在其他

关注(0)|答案(2)|浏览(126)

我目前正在为一个网站开发一个响应式导航栏，我面临着一个问题，当移动的导航菜单被激活时，徽标和汉堡按钮会被推起来。（我使用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 closed How it looks when the Navbar is activated
对不起，如果这个问题写得不好，这是我在Stackoverflow上的第一篇文章。
我曾尝试使用flex-wrap将导航栏放在移动设备上的单独一行，但它似乎并不像预期的那样工作。当注意到它推高了其他2个div时，我试着给它一个边际顶部，因为我认为边际可能会导致问题，这也没有解决它。所以现在我希望在这里得到解决方案。

next.js

来源：https://stackoverflow.com/questions/76225966/issue-with-mobile-navigation-pushing-logo-and-hamburger-button-up

2条答案

按热度按时间

tzxcd3kk1#

你在父div中使用h-24类固定了高度，当你在移动的上打开导航时，它会试图挤压内容。
您可以将其更改为md:h-24，因此在较小的屏幕上高度将为auto。

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

export default function IndexPage() {
  const [active, setActive] = useState(false);

  function toggleNav() {
    console.log("toggleNav");
    setActive(!active);
  }
  return (
    <div className="bg-gray-800">
      <div className="max-w-7xl px-6 md:h-24 h-auto m-auto items-center flex justify-between flex-wrap md:flex-nowrap">
        {/* Logo */}
        <div className="flex flex-col flex-1 py-4">
          <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>
  );
}

这里是codesanbox link和preview link。

赞(0）回复(0）举报 2023-05-17

zi8p0yeb2#

您可以尝试将列表div从导航栏div中取出：

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>
            <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>
    );
};

export default Navbar;

赞(0）回复(0）举报 2023-05-17

我来回答

next.js 移动的导航推送徽标和汉堡包按钮的问题

2条答案

相关问题

热门标签

最新问答