I've been building this navbar this week and seem to have the layout working for the most part. However there are a couple of little functionality issues I have run in to with the hover effect and the links for the menu items on the left and the logo in the middle.
For some reason when the menu is at its full width the hover stops working, but when I collapse it to the hamburger menu it works just fine. I'm not too sure what I've miss here, and would welcome and suggestions on what I've done wrong to stop the hover and the links from working.
The accented-pink color is a custom configured color in my tailwind.config.js file
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: [],
};
CodePudding user response：
The accented colors are used with forms as tailwind docs says
so if you deleted the -accent and specify the degree of color after pink you should be good to go
hover:text-pink-500
CodePudding user response：
Works for me.
Maybe u could use the dev tools to see what's going on when u hover on wide screen.
Little advice, try to loop through the data in an array rather than writing the same code multiple times. Here's how I test the code, hope it helps.
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;