how to create a responsive navbar using html and css code example

Example: css responsive navigation

#header{
position:fixed;
z-index:1000;
left:0;
top:0;
width:100vw;
height:auto;
}

#header .header{
min-height:8vh;
background-color: rgba(0,0,0,0.3);
}

#header .nav-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:100%;
  max-width:1300px;
  padding:0 10px;
}

#header .nav-list ul{
  list-style:none;
  position:absolute;
  background-color:rgb(31,30,30);
  width:100vw;
  height:100vh;
  left:0;
  top:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:1;
  overflow-x:hidden;
}

#header .nav-list ul a{
  font-size:2.5rem;
  font-weight:500;
  letter-spacing: .2rem;
  text-decoration:none;
  color:white;
  text-transform:uppercase;
  padding:20px;
  display:block;
  
  
}