title: How to make a navbar that does not change in height with screen size?
body: <p>This is my navbar. I'm new to Bootstrap and its driving me crazy. All I want is a simple navbar that doesn't change its height with screen changes, but is horizontally responsive. This one always seems to change navbar height below 768px.</p>
  
  <pre><code>&lt;nav class="navbar navbar-fixed-top navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;a href="{%url 'index'%}" class="navbar-left"&gt;&lt;h5&gt;blumury&lt;/h5&gt;&lt;/a&gt;
      &lt;ul class="nav navbar-nav navbar-right" "&gt;
        &lt;li&gt;&lt;a href="{%url 'index'%}"&gt;&lt;i class="material-icons" style="font-size: 16px;"&gt;home&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="material-icons" style="font-size: 16px;"&gt;vibration&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class="dropdown"&gt;
        &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;&lt;i class="material-icons" style="font-size: 16px;"&gt;settings &lt;span class='caret'&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
            &lt;li&gt;&lt;a href="{%url 'profile_view' pk=request.user.id%}"&gt;Profile&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Write Block&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Series&lt;/a&gt;&lt;/li&gt;
            &lt;li class="divider"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="{%url 'signout'%}"&gt;Logout&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>