Bootstrap navbar is not responsive
<p>I have coded up a bootstrap navbar, however when I tried to test its responsiveness, it does not create the little hamburger icon like it should...</p>

<p>I have an outer container for my page which has a fixed width, and an inner container for my fixed-top navbar of course. I have tried playing around with the containers, but it doesnt make the navbar responsive at all, so I must be missing something, or some code is conflicting with the responsive navbar??</p>

<p>fyi: the flex code doesnt seem to be working correctly in here :/</p>

<p>thanks guys</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  padding-top: 102px;
  background-color: #4d4d4d;
}
.container {
  width: 1530px;
  margin: 0 auto;
  margin-top: 0;
}
.navbar-brand {
  font-size: 50px;
  padding-top: 40px;
}
.custom-nav {
  min-height: 90px;
  font-size: 16px;
  color: #000 !important;
  background-color: #fff;
}
.dropdown-menu.user-list {
  width: 100%;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  background-color: #F8F8F8;
  font-size: 15px;
}
ul.user-list li a {
  padding: 8px 30px;
}
ul.user-list li.divider {
  width: 200px;
  margin: 0 auto;
}
.avatar-img {
  padding: 0;
}
i.fa-angle-down {
  font-size: 25px;
  vertical-align: middle;
  font-weight: lighter;
}
/* My styles */

li.dropdown {
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.user {
  margin-left: 50px;
  margin-right: 20px;
}
.label {
  border-radius: 100px;
  position: absolute;
  top: 25px;
  right: 2px;
  background-color: #ff5500;
}
.navbar-default .navbar-nav&gt;li&gt;a {
  color: #777;
  padding: 30px 19px;
}
li.dropdown.bell {
  margin-right: 40px;
}
.nav&gt;li.dropdown.bell&gt;a:hover,
.nav&gt;li.dropdown.bell&gt;a:focus {
  background-color: transparent;
}
#search-container {
  width: 300px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"&gt;
&lt;!-- Latest compiled and minified CSS --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;

&lt;!-- Latest compiled and minified JavaScript --&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;div class="container"&gt;
  &lt;nav class="navbar navbar-default navbar-fixed-top custom-nav"&gt;
    &lt;div class="container"&gt;
      &lt;a class="navbar-brand navbar-left" href="#"&gt;PAGE NAME&lt;/a&gt;

      &lt;ul class="nav navbar-nav navbar-right"&gt;

      &lt;/ul&gt;

      &lt;ul class="nav navbar-nav navbar-right"&gt;
        &lt;!-- search bar added --&gt;
        &lt;li class="dropdown"&gt;
          &lt;div class="input-group" id="search-container"&gt;
            &lt;input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"&gt;
            &lt;span class="input-group-addon" id="basic-addon2"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;&lt;/span&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class="dropdown bell"&gt;
          &lt;a href="#" class="dropdown-toggle inbox" data-toggle="dropdown"&gt;
            &lt;img src="http://placehold.it/50x50" class=" avatar-img img-square"&gt;
            &lt;span class="label label-info"&gt;1&lt;/span&gt;
          &lt;/a&gt;
          &lt;ul class="dropdown-menu bell" role="menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;span class="label label-warning"&gt;4:00 AM&lt;/span&gt;Favourites Snippet&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;span class="label label-warning"&gt;4:30 AM&lt;/span&gt;Email marketing&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;span class="label label-warning"&gt;5:00 AM&lt;/span&gt;Subscriber focused email
                            design&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="divider"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#" class="text-center"&gt;View All&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;

        &lt;li class="dropdown"&gt;
          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
            &lt;img src="http://placehold.it/70x70" class=" avatar-img img-circle"&gt;&lt;span class="user"&gt;Jacky Smith&lt;/span&gt;&lt;i class="fa fa-angle-down"&gt;&lt;/i&gt;
            &lt;!-- &lt;span class="glyphicon glyphicon-menu-down"&gt;&lt;/span&gt; --&gt;
          &lt;/a&gt;
          &lt;ul id="menu" class="dropdown-menu user-list" role="menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="divider"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="divider"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="divider"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="divider"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;

    &lt;/div&gt;
  &lt;/nav&gt;

  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
        &lt;p&gt;dfsjfhskfs&lt;/p&gt;


        &lt;!-- &lt;div class="chevron right"&gt;
     &lt;a href="#"&gt;&lt;/a&gt;
   &lt;/div&gt;

   &lt;div style="height: 1em;"&gt;
   &lt;/div&gt; --&gt;




      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

&lt;/div&gt;</code></pre>
</div>
</div>
</p>