手机导航栏问题导致标志和汉堡按钮上移

huangapple
go评论56阅读模式
英文:

Issue with mobile navigation pushing logo and hamburger button up

问题

我目前正在为一个网站设计响应式导航栏，遇到一个问题，当移动设备的导航菜单被激活时，标志和汉堡按钮会被推上去。 （顺便说一下，我正在使用NextJS和TailwindCSS）

以下是代码：

"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;

可能相关的图像：
导航栏关闭时的外观
导航栏激活时的外观

如果问题描述不够完美，这是我在Stackoverflow上的第一篇帖子，对此感到抱歉。

我尝试使用flex-wrap将导航栏放在移动设备上的单独一行，但似乎没有按预期工作。 当我注意到它将其他两个div推上去时，我尝试给它添加一个margin-top，因为我认为边距可能导致了问题，但这也没有解决问题。 所以现在我希望在这里找到解决方案。

英文:

I'm currently working on a responsive navbar for a website, and I'm facing an issue where the logo and hamburger button get pushed up when the mobile navigation menu is activated. (I am using NextJS and TailwindCSS btw)

Here's the code:

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

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

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

  return (
    &lt;div className=&quot;bg-gray-800&quot;&gt;
      &lt;div className=&quot;max-w-7xl px-6 h-24 m-auto items-center flex justify-between flex-wrap md:flex-nowrap&quot;&gt;
        {/* Logo */}
        &lt;div className=&quot;flex flex-col flex-1&quot;&gt;
          &lt;p className=&quot;text-white font-black text-3xl&quot;&gt;NSTK&lt;/p&gt;
        &lt;/div&gt;

        {/* Hamburger Menu */}
        &lt;div
          className=&quot;hamburger-menu md:hidden block space-y-1&quot;
          onClick={toggleNav}
        &gt;
          &lt;div className=&quot;h-1 w-6 bg-white rounded-lg&quot;&gt;&lt;/div&gt;
          &lt;div className=&quot;h-1 w-6 bg-white rounded-lg&quot;&gt;&lt;/div&gt;
          &lt;div className=&quot;h-1 w-6 bg-white rounded-lg&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;

        {/* List */}
        &lt;div
          className={
            active
              ? &quot;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&quot;
              : &quot;hidden md:flex md:flex-row md:space-y-0 md:space-x-4&quot;
          }
        &gt;
          &lt;Link href={&quot;/&quot;}&gt;
            &lt;p className=&quot;text-white/80 hover:text-white/90 transition-all duration-300&quot;&gt;
              Home
            &lt;/p&gt;
          &lt;/Link&gt;
          &lt;Link href={&quot;/&quot;}&gt;
            &lt;p className=&quot;text-white/80 hover:text-white/90 transition-all duration-300&quot;&gt;
              Home
            &lt;/p&gt;
          &lt;/Link&gt;
          &lt;Link href={&quot;/&quot;}&gt;
            &lt;p className=&quot;text-white/80 hover:text-white/90 transition-all duration-300&quot;&gt;
              Home
            &lt;/p&gt;
          &lt;/Link&gt;
          &lt;Link href={&quot;/&quot;}&gt;
            &lt;p className=&quot;text-white/80 hover:text-white/90 transition-all duration-300&quot;&gt;
              Home
            &lt;/p&gt;
          &lt;/Link&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

export default Navbar;

Images that might be relevant:
How it looks when the Navbar is closed
How it looks when the Navbar is activated

Sorry if this question is not perfectly written, this is my first post on Stackoverflow.

I have tried using flex-wrap for it to put the navbar in a separate line on mobile-devices, but it doesn't seem to work as expected. When noticing that it pushes the other 2 divs up, I have tried giving it a margin-top, as I thought the margins might cause the problem, that didn't solve it either. So now I am hoping to get the solution here.

答案1

得分: 0

以下是翻译好的部分代码：

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;
英文:

You can try taking the list div out of the navbar div:

import React, { useState } from &quot;react&quot;;
import Link from &quot;next/link&quot;;

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

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

    return (
        &lt;div className=&quot;bg-gray-800&quot;&gt;
            &lt;div className=&quot;max-w-7xl px-6 h-24 m-auto items-center flex justify-between flex-wrap md:flex-nowrap&quot;&gt;
                {/* Logo */}
                &lt;div className=&quot;flex flex-col flex-1&quot;&gt;
                    &lt;p className=&quot;text-white font-black text-3xl&quot;&gt;NSTK&lt;/p&gt;
                &lt;/div&gt;

                {/* Hamburger Menu */}
                &lt;div
                    className=&quot;hamburger-menu md:hidden block space-y-1&quot;
                    onClick={toggleNav}
                &gt;
                    &lt;div className=&quot;h-1 w-6 bg-white rounded-lg&quot;&gt;&lt;/div&gt;
                    &lt;div className=&quot;h-1 w-6 bg-white rounded-lg&quot;&gt;&lt;/div&gt;
                    &lt;div className=&quot;h-1 w-6 bg-white rounded-lg&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                {/* List */}

            &lt;/div&gt;
            &lt;div
                className={
                    active
                        ? &quot;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 &quot;
                        : &quot;hidden md:flex md:flex-row md:space-y-0 md:space-x-4&quot;
                }
            &gt;
                &lt;Link href={&quot;/&quot;}&gt;
                    &lt;p className=&quot;text-white/80 hover:text-white/90 transition-all duration-300&quot;&gt;
                        Home
                    &lt;/p&gt;
                &lt;/Link&gt;
                &lt;Link href={&quot;/&quot;}&gt;
                    &lt;p className=&quot;text-white/80 hover:text-white/90 transition-all duration-300&quot;&gt;
                        Home
                    &lt;/p&gt;
                &lt;/Link&gt;
                &lt;Link href={&quot;/&quot;}&gt;
                    &lt;p className=&quot;text-white/80 hover:text-white/90 transition-all duration-300&quot;&gt;
                        Home
                    &lt;/p&gt;
                &lt;/Link&gt;
                &lt;Link href={&quot;/&quot;}&gt;
                    &lt;p className=&quot;text-white/80 hover:text-white/90 transition-all duration-300&quot;&gt;
                        Home
                    &lt;/p&gt;
                &lt;/Link&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    );
};

export default Navbar;

</details>



# 答案2
**得分**: 0

以下是您要翻译的内容：

您在父元素中使用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 (

{/* Logo */}

NSTK

    {/* 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>

);
}


这是您提供的代码的翻译。如果您需要更多帮助或有其他问题，请随时告诉我。
<details>
<summary>英文:</summary>
You have fixed height in parent div with `h-24` class, when you open nav on mobile, it tries to squeeze content.
You can change this to `md:h-24`, so the height will be `auto` on smaller screen.
&quot;use client&quot;;
import React, { useState } from &quot;react&quot;;
import Link from &quot;next/link&quot;;
export default function IndexPage() {
const [active, setActive] = useState(false);
function toggleNav() {
console.log(&quot;toggleNav&quot;);
setActive(!active);
}
return (
&lt;div className=&quot;bg-gray-800&quot;&gt;
&lt;div className=&quot;max-w-7xl px-6 md:h-24 h-auto m-auto items-center flex justify-between flex-wrap md:flex-nowrap&quot;&gt;
{/* Logo */}
&lt;div className=&quot;flex flex-col flex-1 py-4&quot;&gt;
&lt;p className=&quot;text-white font-black text-3xl&quot;&gt;NSTK&lt;/p&gt;
&lt;/div&gt;
{/* Hamburger Menu */}
&lt;div
className=&quot;hamburger-menu md:hidden block space-y-1&quot;
onClick={toggleNav}
&gt;
&lt;div className=&quot;h-1 w-6 bg-white rounded-lg&quot;&gt;&lt;/div&gt;
&lt;div className=&quot;h-1 w-6 bg-white rounded-lg&quot;&gt;&lt;/div&gt;
&lt;div className=&quot;h-1 w-6 bg-white rounded-lg&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
{/* List */}
&lt;div
className={
active
? &quot;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&quot;
: &quot;hidden md:flex md:flex-row md:space-y-0 md:space-x-4&quot;
}
&gt;
&lt;Link href={&quot;/&quot;}&gt;
&lt;p className=&quot;text-white/80 hover:text-white/90 transition-all duration-300&quot;&gt;
Home
&lt;/p&gt;
&lt;/Link&gt;
&lt;Link href={&quot;/&quot;}&gt;
&lt;p className=&quot;text-white/80 hover:text-white/90 transition-all duration-300&quot;&gt;
Home
&lt;/p&gt;
&lt;/Link&gt;
&lt;Link href={&quot;/&quot;}&gt;
&lt;p className=&quot;text-white/80 hover:text-white/90 transition-all duration-300&quot;&gt;
Home
&lt;/p&gt;
&lt;/Link&gt;
&lt;Link href={&quot;/&quot;}&gt;
&lt;p className=&quot;text-white/80 hover:text-white/90 transition-all duration-300&quot;&gt;
Home
&lt;/p&gt;
&lt;/Link&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
);
}
Here is the [codesanbox link][1] and [preview link][2].
[1]: https://codesandbox.io/p/sandbox/xenodochial-lehmann-glf0ud?welcome=true
[2]: https://glf0ud-3000.csb.app/
</details>

huangapple
  • 本文由 发表于 2023年5月11日 17:13:38
  • 转载请务必保留本文链接：https://go.coder-hub.com/76225966.html
  • next.js
  • tailwind-css
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定