Nav bar disappears in browsers when using css position: fixed;

The nav bar disappears in browsers when using CSS position: fixed;

Other solutions haven't worked for me. I am using React.js for my project.

My issue in pictures

I've tried playing with the z-index, but that doesn't fix the problem.

nav.css

nav {
    background: rgba(0,0,0,0.3);
    width: max-content;
    display: block;
    padding: 0.7rem 1.7rem;
    z-index: 2;
    position: fixed;
/*Note: when removing 'position: fixed'; the nav bar is present. I want the nav bar to be fixed when I scroll down the page */
      
}

Header.jsx

import './App.css';
import Nav from './components/nav/Nav';

const App = () => {
  return (
<>
  <Header />
  <Nav />
  <About />
  <Experience />
  <Services />
  <Portfolio />
  <Testimonials />
  <Footer />
  <Contact />
  
</>

  );
}

export default App;

Nav.jsx

import React from 'react'
import './nav.css'
import {AiOutlineHome} from 'react-icons/ai'
import {FiUser} from 'react-icons/fi'
import {BiBookBookmark} from 'react-icons/bi'
import {RiServiceLine} from 'react-icons/ri'
import {TbMessage2} from 'react-icons/tb'

export const Nav = () => {
  return (
    <nav>
    <a href="#"><AiOutlineHome/></a>
    <a href="#about"><FiUser/></a>
    <a href="#experience"><BiBookBookmark/></a>
    <a href="#services"><RiServiceLine/></a>
    <a href="#contact"><TbMessage2/></a>
    </nav>
  )
}
export default Nav