How to make a responsive navigation bar?

Question

How can I make a responsive navigation bar where it does not cover the top of my page? I am using thymeleaf framework, and twitter bootstrap.

My Navigation code

<div th:fragment="header">
  <div class="navbar navbar-inverse navbar-fixed-top" style="background-color:black;">
    <div class="container">
      <div class="navbar-header">
         <div id="logo"><img th:src="@{/images/bg.jpg}" /></div>
       </div>
       <div class="navbar-collapse collapse">
         <ul class="nav navbar-nav">
           <li class="active"><a th:href="@{/}">Home</a></li>
         </ul>
       </div>
     </div>
   </div>
 </div>

I don't have much css for this part because I am using twitter bootstrap.

Css

#logo
{
display:inline-block;
}

Here is an image that is blocking my page.

Answer 1

取出navbar-fixed-top ，看看是否能解决您的问题。