title: How to adjust nav bar in small screen?
body: <p>I am making a navbar in my page using bootstrap 3,it isn't working well with small screen,the nav bar didn't collapse well when i try to minimize the screen,what is the problem?Here is a <a href="https://jsfiddle.net/Lwpefhvf/1/" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;img id="logo" src="../lib/css/images/Logo.jpg" class="pull-left" width="100px" height="100px"&gt;
          &lt;nav class="navbar navbar-inverse" style="height: 40px;margin-left: 105px;"&gt;
              &lt;div class="container-fluid"&gt;
                   &lt;div class="navbar-header"&gt;
                          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false"&gt;
                              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt; 
                          &lt;/button&gt;
                        &lt;a class="navbar-brand" style="height: 30px;margin-top:-12px;"&gt;Welcome&lt;/a&gt;
                   &lt;/div&gt;
                   &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
                          &lt;ul class="nav navbar-nav"&gt;
                              &lt;li class="dropdown"&gt;&lt;a href="#" data-toggle="modal" data-target="#modal-1"&gt;Add New Category&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="dropdown"&gt;&lt;a href="#" data-toggle="modal" data-target="#modal-2"&gt;Search Orders&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="dropdown"&gt;&lt;a href="#" data-toggle="modal" data-target="#modal-3"&gt;Calendar&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="dropdown"&gt;&lt;a href="#" data-toggle="modal" data-target="#modal-4"&gt;Order status&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;ul&gt;
                              &lt;li class="nav navbar-nav navbar-right"&gt;
                                  &lt;?php
                                      if(isset($_SESSION["username"]))
                                      {
                                          echo '&lt;a href="../logout.php" id="logout" class="btn btn-success CustLog"&gt;Log out&lt;/a&gt;';
                                          echo '&lt;h5&gt;Welcome- '.$_SESSION["username"].'&lt;/h5&gt;'; 
                                      }
                                      else
                                      {
                                          header("location:../login.php");
                                      }
                                      include_once "connect.php";
                                  ?&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
           &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/PeGnC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PeGnC.png" alt="enter image description here"></a></p>