I have a ReactJS project where I have a navbar with a mobile dropdown menu and a content carousel on the homepage. When the menu is open on mobile, the carousel appears on top of the menu, which I want to prevent.
Here’s a simplified version of my setup:
-
Navbar – The mobile menu is controlled by a
useStatehook and toggles the visibility of the dropdown. -
Carousel – The carousel slides through content every few seconds and is displayed below the navbar.
I’ve tried adding z-index to both the navbar and carousel, but the carousel still ends up on top of the menu when it’s opened. I also ensured the navbar has a position: relative, but I am not sure why the carousel isn’t staying below the menu.
Homepage
return (
<div className='mt-3 grid grid-cols-2 relative '>
{/* carousel */}
<div className='overflow-hidden z-0'>
<div
className='flex transition-transform duration-700 ease-in-out'
style={{
transform: `translateX(-${currentIndex * 100}%)`,
}}
>
{artists.map(artist => (
<div key={artist.artistId} className='w-full flex-shrink-0 p-4 bg-slate-700'>
<img
src={artist.recentArtwork?.images?.frontView}
alt={artist.recentArtwork?.title || 'Artwork'}
className='w-full h-52 object-cover'
/>
<div className='p-4 text-center'>
<img
src={artist.avatar}
alt={artist.fullName}
className='w-16 h-16 rounded-xl mx-auto mb-3 border-2 border-indigo-500'
/>
<h2 className='text-xl font-semibold'>{artist.fullName}</h2>
<p className='text-gray-500 text-sm'>{artist.email}</p>
</div>
</div>
))}
</div>
</div>
<div></div>
</div>
);
Navbar
return (
<nav
className='bg-gray-100 font-custom dark:bg-gray-800 text-gray-800 dark:text-white lg:px-5 px-2 border-b border-gray-300 dark:border-gray-700 drop-shadow'
ref={menuRef}
>
<div className='flex gap-x-3 sm:gap-x-5 sm:px-3 xl:gap-x-20 py-2 px-2 relative'>
<div className='shrink-0 flex'>
<Link
to='/home'
onClick={handleLinkClick}
className='flex items-center font-extrabold font-ranchers text-xl '
>
<div className='flex gap-1'>
<div className=''>
<img src={smallIcon} alt='logo' className='h-auto w-6 sm:w-7' />
</div>
<div className='hidden leading-[1.1rem] sm:flex flex-col justify-center'>
<p className='text-cyan-600'>ETHEREAL</p>
<p>CANVAS</p>
</div>
</div>
</Link>
</div>
<div className='relative flex items-center w-full'>
<span className='absolute inset-y-0 right-51 flex items-center pl-3'>
<CiSearch className='h-5 w-5 text-gray-500' />
</span>
<input
type='text'
className='w-full pl-10 pr-4 py-1 border text-sm border-gray-300 rounded-md'
placeholder='Search...'
/>
</div>
<div className='lg:flex items-center lg:gap-4 xl:gap-10 hidden'>
{['Home', 'Artists', 'Artworks', 'Marketplace', 'About'].map(link => (
<Link
key={link}
to={`/${link.toLowerCase()}`}
className='text-sm font-custom font-extrabold text-slate-700 hover:text-blue-500 dark:hover:text-blue-400'
onClick={handleLinkClick}
>
{link}
</Link>
))}
</div>
{/* Avatar and Dark Mode */}
<div className='shrink-0 flex items-center'>
{isLoggedIn && (role === 'artist' || role === 'collector') ? (
<div className='hidden lg:flex items-center gap-5'>
<Dropdown
label={fullName}
options={options}
logout={handleLogout}
avatar={<Avatar src={avatar} name={name || fullName} alt='User Avatar' />}
role={role}
/>
<button
onClick={toggleDarkMode}
className='hidden lg:flex text-xl'
aria-label='Toggle Dark Mode'
>
{isDarkMode ? <TbSunFilled /> : <TbMoonFilled />}
</button>
</div>
) : (
<div className='flex gap-4'>
<Link
to='/login'
onClick={handleLinkClick}
className='hidden lg:block px-3 py-1 rounded-lg text-xs bg-blue-500 text-white
transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110
hover:bg-indigo-500 duration-300'
>
Login / Register
</Link>
<button
onClick={toggleDarkMode}
className='hidden lg:flex text-xl'
aria-label='Toggle Dark Mode'
>
{isDarkMode ? <TbSunFilled /> : <TbMoonFilled />}
</button>
</div>
)}
<button className='lg:hidden text-xl' onClick={() => setIsMenuOpen(!isMenuOpen)}>
{isMenuOpen ? <CgCloseR /> : <TbMenu2 />}
</button>
</div>
</div>
{/* DROPDOWN */}
<div
className={`${isMenuOpen ? 'block' : 'hidden'} lg:hidden absolute bg-gray-100 w-full left-0 right-0`}
>
{['Home', 'Artists', 'Artworks', 'Marketplace', 'About'].map(link => (
<div
key={link}
className='hover:bg-zinc-200 hover:border-l-4 hover:border-l-orange-400 hover:rounded hover:ml-1 text-sm'
>
<Link
to={`/${link.toLowerCase()}`}
className='block py-2 pl-3 font-custom font-medium'
onClick={handleLinkClick}
>
{link}
</Link>
</div>
))}
{isLoggedIn ? (
<div className='border-t grid grid-cols-3 font-custom px-3 py-5'>
<div className='flex items-center col-span-2'>
<Avatar src={avatar} name={fullName} alt='User Avatar' />
<div className='pl-1'>
<p className='text-xs text-slate-800'>{fullName}</p>
<p className='text-[10px] text-slate-500'>{email}</p>
</div>
</div>
<div className='flex items-center justify-end col-span-1'>
<button
onClick={() => {
handleLogout();
handleLinkClick();
}}
className='text-xs px-3 py-1 rounded-md text-white bg-red-600'
>
Logout
</button>
</div>
</div>
) : (
<div className='border-t flex items-center justify-between px-3 py-5'>
<Link
to='/login'
onClick={handleLinkClick}
className='px-3 py-1 rounded-lg text-xs bg-blue-500 text-white
transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110
hover:bg-indigo-500 duration-300'
>
Login / Register
</Link>
<button
onClick={toggleDarkMode}
className='flex text-2xl'
aria-label='Toggle Dark Mode'
>
{isDarkMode ? <TbSunFilled /> : <TbMoonFilled />}
</button>
</div>
)}
</div>
</nav>
);
New contributor
chupapimo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.