skip to Main Content

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


  1. You need to set the z-index property to make the navigation bar appear above the particles, you can do this in tailwind by adding z-[index]:

    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 z-100'>
          <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;
    
    Login or Signup to reply.
  2. Seems the problem is related to the positioning of the containers. You need to make the header as absolute and the rest the screen to relative. And remove the md:hidden to make it visible for all kind of screens.

    // TopBar.jsx
    <header className='absolute min-h-16 top-0 text-black w-full font-bold z-10'> // set z-index to 10 here and make it as absolute
          <div className='flex justify-end items-center p-4'>  // removed md:hidden
            <Hamburger toggled={isOpen} toggle={setOpen} rounded size={'28'}/>
          </div>
          //rest of your code
    </header>
    

    // Home.jsx
    <div className="z-0 relative"> // make it as relative
        <Particles
          id="tsparticles"
          particlesLoaded={particlesLoaded}
          options={options}
        />
    </div>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search