How to hide the content inside body in html5?

Question

I have very long content in my page. Also my menu header is transparent with text over it. So, if i scroll the page, the whole content should be hidden behind the menu header. The content should not be seen through this header. My menu header should be transparent. How to do this?

//code   
 .navbar-fixed-top{
    background-color:yellow;   
    height:60px;
    text-align:center;
    font-size:40px;
    opacity:0.7;
}

.content{
    margin-top:65px;    
}

JSFIDDLE

Answer 1

remove the property opacity or make opacity:1;