How i fix it? I need a transparent navigation bar

May 8, 2022

Hi I have a background video (The jellyfish move) this is a photo of a frame of this video
I need to understand why writing "Medusa" text has a background color, maybe the color is #222, but I don’t see how to disable it in code. i need to create a navbar but the background color is getting in the way!
I need the navigation bar to be transparent like this

tesla navbar example

See Code

import logo from './logo.svg';
import './App.css';
import bgvideo from './components/bgvideo.mp4';
function App() {
  return (
    <div className="App">
       <div className='navbar'>
            <h1>Medusa</h1>
          
      </div>
        <div className='bg'>
           <video autoPlay muted loop>
              <source  src= {bgvideo} type ="video/mp4" />
           </video>
        </div>
    </div>
  );
}

export default App;

* {
  margin: 0;
  padding: 0;
  background-color: #222;
}


video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

h1 {
  color: white;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-weight: bold;
  text-align: center;
  font-size: 6rem;
  margin-top: 30vh;
  background-image: none;
  background-color: none;
}

>Solution :

* {
  margin: 0;
  padding: 0;
  /* background-color: #222; remove this line */
}


video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

h1 {
  color: white;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-weight: bold;
  text-align: center;
  font-size: 6rem;
  margin-top: 30vh;
  /* background-image: none; and no need for this */
  /* background-color: none; and this */
}