I’m learning ReactJS along with Tailwind CSS. I’m trying to make my page responsive(I’m a beginner), but now I’m stuck with an issue with my navbar. The problem is, my navbar won’t show up on top of my screen or background.
Explanation:
I’m using tsparticles for my background from https://particles.js.org/. After playing with it a little, I made the tsparticles appear on my project and it is working perfectly fine except for the fact that they often take up the entire screen. I needed to render my navbar component on top of it. But it doesn’t seem to work, I tried z-index properties but it doesn’t seem to work either. I’m new to tailwind css and this is my first project. Can you guys identify why my navbar is not appearing on top. On inspecting I can see that the navbar exists behind the particles.
My navbar code(TopBar.jsx)
import React, { useState } from 'react';
import { NavLink } from 'react-router-dom';
import {Fade as Hamburger} from 'hamburger-react';
const TopBar = () => {
const [isOpen, setOpen] = useState(false)
return (
<header className='min-h-16 top-0 text-black w-full font-bold'>
<div className='flex justify-end items-center p-4 md:hidden'>
<Hamburger toggled={isOpen} toggle={setOpen} rounded size={'28'}/>
</div>
{isOpen && (
<div className='md:flex md:justify-end md:text-black pr-9 pt-7'>
<div className='flex flex-col gap-y-4 items-center md:space-x-12 md:flex-row text-xl'>
<NavLink to="/about" >About</NavLink>
<NavLink to="/contact" >Contact</NavLink>
<NavLink to="/portfolio" >Portfolio</NavLink>
</div>
</div>
)}
</header>
)
}
export default TopBar;
Home.jsx code:
import { useEffect, useMemo, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
import { loadSlim } from "@tsparticles/slim";
import TopBar from "./TopBar";
const Home = () => {
const [init, setInit] = useState(false);
useEffect(() => {
initParticlesEngine(async (engine) => {
await loadSlim(engine);
}).then(() => {
setInit(true);
});
}, []);
const particlesLoaded = (container) => {
console.log(container);
};
const options = useMemo(
() => ({
background: {
color: {
value: "#005789",
},
},
fpsLimit: 165,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
},
modes: {
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
direction: "none",
enable: true,
outModes: {
default: "bounce",
},
random: false,
speed: 1,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 210,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
value: { min: 1, max: 5 },
},
},
detectRetina: true,
}),
[],
);
return (
<div>
<div className="z-10">
<TopBar/>
</div>
<div className="z-0">
<Particles
id="tsparticles"
particlesLoaded={particlesLoaded}
options={options}
/>
</div>
</div>
);
};
export default Home;
I would kindly like some help in identifying what I’m doing wrong. Thank You!
Dev-Server : React + Vite
2
Answers
You need to set the
z-index
property to make the navigation bar appear above the particles, you can do this in tailwind by addingz-[index]
:Seems the problem is related to the positioning of the containers. You need to make the header as
absolute
and the rest the screen torelative
. And remove themd:hidden
to make it visible for all kind of screens.