I made my navbar fixed and now it's transparent no matter what I style the background color to-CodePudding

.header-nav{
  width: 100%;
  display: flex;
  justify-content: space-around;
  position: fixed;
  top: 0;
  background-color: red;
}

I tried to create a fixed bar with this code, but after I created it, it became transparent even after I added a background color.

CodePudding user response：

I'm not entirely sure what you mean by transparent but it sounds like you might be seeing content on top of the header, not underneath it. Try setting a z-index on your header to force it to the top of the stack.

.header-nav{
  width: 100%;
  display: flex;
  justify-content: space-around;
  position: fixed;
  top: 0;
  background-color: red;
  z-index:2;
}