Navbar Is Transparent

Hey all, simple question about CSS. In a Codepen project I’m doing (https://codepen.io/micahacobb/pen/aPpjzo) my navbar is somewhat transparent. I haven’t had this happen before and I am not sure how to fix it.

(This is my navbar code in the media query; you have to reduce the width of the navbar to see the navbar at the top…that’s when it becomes transparent)

I’m using code similar to other projects, but the navbars in those were not transparent.

Any help would be appreciated.

This is what I see when I reduce my screen size…

The navbar doesn’t seem any different in terms of opacity.

Your code, however, shows the background property as being not fully opaque.

@media screen and (max-width: 920px) {
  #navbar {
    position: fixed;
    width:100%;
    top: 0px;
    left: 0px;
    display:flex;
    padding: 0.5rem;
    color:black;
    background:rgba(255,255,255,0.9)

The slight transparency is in the last line.
background:rgba(255,255,255,0.9)

https://www.w3schools.com/cssref/func_rgba.asp

Hopefully, I’m not missing something here…

Yes as @willjw3 said you have a slighty transparent background.

I had to adjust z-index:1 on your navbar to get it on top of the main content as well.

1 Like

Thanks. I added that in after the post was made, trying to take into account what others were saying. If I remove the slight transparency introduced by the rgba() line, I still had the same problem.

Yes! z-index: 1 did the trick!