Fixed navbar problems

I want the navbar to look like it does when you get rid of ‘position: fixed’ on line 13 of my html code, but I still want the position to be fixed at the top. Can someone explain why my navbar slides over when using .navbar or fix the position?

i used top: 0; right: 0; left: 0; and that solved the position, but I don’t know how to make it opaque. I tried opacity: 1;

#navbar {z-index: 1}

You should have your styles in the style block or in the CSS section. Having styles in the HTML makes debugging confusing and difficult as you would have two places to check for styling…

For the opacity, have a look at rgba and hsla: