Nav Links not showing on screens larger than 768px
They only show when I toggle the button on the mobile view and then switch back to normal view.
./components/Header.tsx3 Replies
Keep in mind I'm very new to React and NextJS so if you have any tips or anything please let me know
Can I see your code?
maybe share in codepen or something
sounds like the opacity is not turning back on breakpoints without the button, like the isMenuOpen is not being updated. But I don’t use tailwind or whatever framework this so can’t totally make sense of it
I don’t know how to put this in codepen (choose [which] language and paste it all in JS drawer?) but here is the txt file OP linked
"use client";
import { useState } from "react";
import Link from "next/link";
import "./Header.css";
import AnimatedCardGroup from "./AnimatedCardGroup";
import SlideUp from "./SlideUp";
import { animate, motion, AnimatePresence } from "framer-motion";
function Header() {
const [isMenuOpen, setMenuOpen] = useState(false);
const toggleMenu = () => {
setMenuOpen((prev) => !prev);
};
return (
<nav className="border-gray-200 dark:bg-gray-900">
<div className="transition-menu max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<Link
href="/"
className="flex items-center space-x-3 rtl:space-x-reverse"
>
<SlideUp
Content={
<div className="inline-flex gap-4">
<motion.div
whileHover={{
scale: 1.1,
transition: { duration: 0.6 },
}}
>
<img src="logo.png" alt="logo" className="w-16 rounded-xl" />
</motion.div>
<span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white hover:text-yellow-400 transition-colors duration-300">
Elite Education
</span>
</div>
}
/>
</Link>
<button
data-collapse-toggle="navbar-default"
type="button"
className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
aria-controls="navbar-default"
aria-expanded={isMenuOpen ? "true" : "false"}
onClick={toggleMenu}
>
"use client";
import { useState } from "react";
import Link from "next/link";
import "./Header.css";
import AnimatedCardGroup from "./AnimatedCardGroup";
import SlideUp from "./SlideUp";
import { animate, motion, AnimatePresence } from "framer-motion";
function Header() {
const [isMenuOpen, setMenuOpen] = useState(false);
const toggleMenu = () => {
setMenuOpen((prev) => !prev);
};
return (
<nav className="border-gray-200 dark:bg-gray-900">
<div className="transition-menu max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<Link
href="/"
className="flex items-center space-x-3 rtl:space-x-reverse"
>
<SlideUp
Content={
<div className="inline-flex gap-4">
<motion.div
whileHover={{
scale: 1.1,
transition: { duration: 0.6 },
}}
>
<img src="logo.png" alt="logo" className="w-16 rounded-xl" />
</motion.div>
<span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white hover:text-yellow-400 transition-colors duration-300">
Elite Education
</span>
</div>
}
/>
</Link>
<button
data-collapse-toggle="navbar-default"
type="button"
className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
aria-controls="navbar-default"
aria-expanded={isMenuOpen ? "true" : "false"}
onClick={toggleMenu}
>
<span className="sr-only">Open main menu</span>
<svg
className="w-5 h-5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 17 14"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M1 1h15M1 7h15M1 13h15"
/>
</svg>
</button>
<AnimatePresence>
{isMenuOpen && (
<motion.div
initial={{ opacity: 0, height: 0 }}
whileInView={{ opacity: 1, height: isMenuOpen ? "auto" : 0 }}
exit={{ opacity: 0, height: 0 }}
className="w-full md:block md:w-auto"
id="navbar-default"
>
<span className="sr-only">Open main menu</span>
<svg
className="w-5 h-5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 17 14"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M1 1h15M1 7h15M1 13h15"
/>
</svg>
</button>
<AnimatePresence>
{isMenuOpen && (
<motion.div
initial={{ opacity: 0, height: 0 }}
whileInView={{ opacity: 1, height: isMenuOpen ? "auto" : 0 }}
exit={{ opacity: 0, height: 0 }}
className="w-full md:block md:w-auto"
id="navbar-default"
>
<AnimatedCardGroup Classes="mx-auto font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<Link
href="/"
className="text-center active block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent transition-colors duration-300"
aria-current="page"
>
Home
</Link>
<AnimatedCardGroup Classes="mx-auto font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<Link
href="/"
className="text-center active block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent transition-colors duration-300"
aria-current="page"
>
Home
</Link>
<Link
href="/about"
className="text-center block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent transition-colors duration-300"
>
About
</Link>
<Link
href="/services"
className="text-center block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent transition-colors duration-300"
>
Services
</Link>
<Link
href="/pricing"
className="text-center block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent transition-colors duration-300"
>
Pricing
</Link>
<Link
href="/contact-us"
className="text-center block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent transition-colors duration-300"
>
Contact
</Link>
</AnimatedCardGroup>
</motion.div>
)}
</AnimatePresence>
</div>
</nav>
);
}
export default Header;
//
<Link
href="/about"
className="text-center block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent transition-colors duration-300"
>
About
</Link>
<Link
href="/services"
className="text-center block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent transition-colors duration-300"
>
Services
</Link>
<Link
href="/pricing"
className="text-center block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent transition-colors duration-300"
>
Pricing
</Link>
<Link
href="/contact-us"
className="text-center block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent transition-colors duration-300"
>
Contact
</Link>
</AnimatedCardGroup>
</motion.div>
)}
</AnimatePresence>
</div>
</nav>
);
}
export default Header;
//