拥有Tailwind的Navbar已经停止工作
拥有Tailwind的Navbar已经停止工作
提问于 2022-03-25 21:02:04
这周我一直在建造这个导航条，而且布局在很大程度上是可行的。然而，有几个小的功能问题，我已经运行了悬停效果和链接的菜单项在左边和标志在中间。
由于某些原因，当菜单是在它的全部宽度时，悬停停止工作，但当我将它折叠到汉堡菜单时，它工作得很好。我不太确定我在这里错过了什么，并会欢迎和建议我做错了什么来阻止悬停和链接的工作。
重音粉红色是我的tailwind.config.js文件中自定义配置的颜色。
Navbar.jsx
import Link from "next/link";
import { useState } from "react";
import React from "react";
import Logo from "../Logo";
import headerLogo from "../../assets/images/headerImages/phreaquencyLogoPink.png";
import { FiGithub, FiMail, FiTwitter } from "react-icons/fi";
const NewNavbarLogoCenter = () => {
const [active, setActive] = useState(false);
const handleClick = () => {
setActive(!active);
};
return (
<>
<nav className="flex flex-row w-screen bg-yellow-100">
<div className="fixed top-0 flex text-center pl-[5vw] pr-[5vw] md:pl-[1.5vw] md:pr-[1.5vw] lg:pt-[3vw] pb-9 lg:px-[1.5vw] z-50 text-xl w-full align-baseline pt-[5vw]">
<div className="lg:absolute flex lg:left-0 lg:right-0 z-10 lg:mx-auto lg:inline-block md:top-[3vw] md:left-[1.5vw] md:w-[calc(131px+3vw)] md:block">
<Link href="/">
<a>
{" "}
<Logo
logoSrc={headerLogo}
logoAltSrc="phreaquency logo"
logoLayout="intrinsic"
logoObjectFit="contain"
logoWidth="172px"
logoHeight="50px"
className="relative items-center "
/>
</a>
</Link>
</div>
<button
className="inline-flex p-3 ml-auto rounded outline-none hover:text-pink-accented lg:hidden"
onClick={handleClick}
>
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
<div
className={`${
active ? "" : "hidden"
} w-full lg:inline-flex lg:flex-grow lg:w-auto`}
>
<div className="">
<div className="flex flex-col lg:flex-row lg:justify-start">
<div className="items-center justify-center w-full mr-3 lg:flex lg:w-auto hover:text-pink-accented">
<Link href="/">
<a>Agency</a>
</Link>
</div>
<div className="items-center justify-center w-full mr-3 lg:inline-flex lg:w-auto hover:text-pink-accented">
<Link href="/">
<a>Work</a>
</Link>
</div>
<div className="items-center justify-center w-full mr-3 lg:inline-flex lg:w-auto hover:text-pink-accented">
<Link href="/">
<a>Services</a>
</Link>
</div>
<div className="items-center justify-center w-full mr-3 lg:inline-flex lg:w-auto hover:text-pink-accented">
<Link href="/">
<a>Insights</a>
</Link>
</div>
<div className="items-center justify-center w-full mr-3 lg:inline-flex lg:w-auto hover:text-pink-accented">
<Link href="/">
<a>Contact</a>
</Link>
</div>
</div>
<div className="lg:absolute lg:top-0 lg:right-0 flex flex-row text-center pt-[6vw] lg:pt-[3vw] lg:pb-9 px-[1.5vw] z-50 text-xl lg:items-center lg:justify-end w-full justify-center items-center content-center">
<div className="flex items-center justify-center w-full mr-3 lg:inline-flex lg:w-auto hover:text-pink-accented">
<Link href="/">
<a>
<FiGithub />
</a>
</Link>
</div>
<div className="flex items-center justify-center w-full mr-3 lg:inline-flex lg:w-auto hover:text-pink-accented">
<Link href="/">
<a>
<FiTwitter />
</a>
</Link>
</div>
<div className="flex items-center justify-center w-full lg:inline-flex lg:w-auto hover:text-pink-accented">
<Link href="/">
<a>
<FiMail />
</a>
</Link>
</div>
</div>
</div>
</div>
</div>
</nav>
</>
);
};
export default NewNavbarLogoCenter;tailwind.config.js
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
darkMode: "class", //remove this to have dark mode switch automatically
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./layouts/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
height: {
"50v": "50vh",
"60v": "60vh",
"70v": "70vh",
"80v": "80vh",
"90v": "90vh",
},
fontFamily: {
sans: ["Poppins", ...defaultTheme.fontFamily.sans],
},
colors: {
"off-white": "#f8f8ff",
"off-black": "#2e343b",
"pink-accented": "#ed61a2",
"section-overlay": "rgba(0,0,0, .2)",
},
},
},
plugins: [],
};回答 2
Stack Overflow用户
发布于 2022-03-26 01:09:24
Stack Overflow用户
发布于 2022-03-26 07:37:42
为我工作。
也许你可以使用开发工具来查看当你在宽屏幕上悬停时发生了什么。
少提建议，试着循环遍历数组中的数据，而不是多次编写相同的代码。下面是我测试代码的方法，希望它能有所帮助。
import React,{ useState } from "react";
const Navbar = () => {
const [active, setActive] = useState(false);
const handleClick = () => {
setActive(!active);
};
const links = [
{
name:'Agency',
url:'/',
},
{
name:'Work',
url:'/',
},
{
name:'Services',
url:'/',
},
{
name:'Insights',
url:'/',
},
{
name:'Contact',
url:'/',
},
]
return (
<>
<nav className="flex flex-row w-screen bg-yellow-100">
<div className="fixed top-0 flex text-center pl-[5vw] pr-[5vw] md:pl-[1.5vw] md:pr-[1.5vw] lg:pt-[3vw] pb-9 lg:px-[1.5vw] z-50 text-xl w-full align-baseline pt-[5vw]">
<div className="lg:absolute flex lg:left-0 lg:right-0 z-10 lg:mx-auto lg:inline-block md:top-[3vw] md:left-[1.5vw] md:w-[calc(131px+3vw)] md:block">
<a href="/">
logo
</a>
</div>
<button
className="inline-flex p-3 ml-auto rounded outline-none hover:text-pink-accented lg:hidden"
onClick={handleClick}
>
burgerbutton
</button>
<div className={`${
active ? "" : "hidden"
} w-full lg:inline-flex lg:flex-grow lg:w-auto`}>
<div className="">
<div className="flex flex-col lg:flex-row lg:justify-start">
{
links.map((link)=>{
return (
<div className="items-center justify-center w-full mr-3 lg:flex lg:w-auto hover:text-pink-accented">
<a href={link.url}>{link.name}</a>
</div>
)
})
}
</div>
</div>
</div>
</div>
</nav>
</>
);
};
export default Navbar;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71623063
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号