Yes. The standard way is to hide the content and have a hamburger menu. When the user opens the menu, then the content slides out.
Your navbar does not have any height, this is why your content below is covered. You could add some height to it yourself, but there are other problems. Your first problem is that your navbar is in your container-fluid. Your second problem is that you are applying the styles to the ul element not the navbar itself. (if you want to do that, you can remove #navbar completely and just have #nav). I would suggest trying to copythe navbar from the bootstrap site. Keep in mind, that you need to add the bootstrap scripts. Jquery is required, so make sure you add that script before the bootstrap one. http://getbootstrap.com/components/#navbar-default