How do I fix my navbar on top without it getting destroyed?

Question

I am working on a portfolio website using react and tailwind css. When I designed the navbar I wanted a hover effect on it, so I copied the hover effect from this codepen:

codepen for hover-effect

But as soon as I copied the css, I edited my css accordingly. This is the css:

.translucent {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}

.nav{
    color: #fff;
    padding: 15px;
    margin-left: 15px;
    margin-right: 15px;
}

.nav * {
  box-sizing: border-box;
  transition: all .35s ease;
}

.nav li {
  display: inline-block;
  list-style: outside none none;
  margin: .5em 1em;
  padding: 0;
}

.nav a {
  padding: .5em .8em;
  color: rgba(255,255,255,.5);
  position: relative;
  text-decoration: none;
  font-size: 20px;
}

.nav a::before,
.nav a::after {
  content: '';
  height: 14px;
  width: 14px;
  position: absolute;
  transition: all .35s ease;
  opacity: 0;
}

.nav a::before {
  content: '';
  right: 0;
  top: 0;
  border-top: 3px solid #ACDDDE;
  border-right: 3px solid #ACDDDE;
  transform: translate(-100%, 50%);
}

.nav a:after {
  content: '';
  left: 0;
  bottom: 0;
  border-bottom: 3px solid #ACDDDE;
  border-left: 3px solid #ACDDDE;
  transform: translate(100%, -50%)
}

.nav a:hover:before,
.nav a:hover:after{
  transform: translate(0,0);
  opacity: 1;
}

.nav a:hover {
  color: #fff;
}

.nav a:visited {
  color: #fff;
}

And this is the jsx:

import React from "react";
import "./header.css";
import logo from "../../assets/logo.png";

const Header = () => {
    return (
        <div className="translucent flex justify-between nav items-baseline fixed">
            <div className="h-12 sm:hidden px-6">
                <img src={logo} alt="Harshal Gunjal" />
            </div>
            <div className="text-white text-2xl font-bold hidden sm:block px-6 cursor-pointer">
                Harshal Gunjal
            </div>
            <div className="px-6">
                <ul className="flex items-center justify-center gap-8">
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#home">Home</a>
                    </li>
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#about">About</a>
                    </li>
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#portfolio">Portfolio</a>
                    </li>
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#resume">Resume</a>
                    </li>
                    <li className="text-opacity-90 text-white text-lg font-bold hover:text-opacity-100 transition-all hover:scale-125 cursor-pointer">
                        <a href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    );
};

export default Header;

The navbar looks like this before applying the fixed tag:

After I applied the fixed tag on the navbar, it changes into this:

You can find the code in the github:

github source code

How can I fix the navbar on the top without it getting change? Thanks for the help.

I tried changing the css in the css file instead of the tailwind 'fixed' class, but it didn't work. I also tried to change the position property in nav but the navbar got destroyed everytime I changed anything.

Answer 1

into your code

<div className="translucent flex justify-between nav items-baseline fixed">

add

top-0 left-0 mx-auto inset-x-0

result

<div className="translucent flex justify-between nav items-baseline fixed top-0 left-0 mx-auto inset-x-0">