title: Adjust navbar minimum height depending on screen width
body: <p>I am using bootstrap and have set a minimum height of 150px for the navbar. This works but I want to re-adjust the minimum height to 30px when the screen width is lower than 768px.</p>
  
  <p>I am using the class .navbar-min-height to set the minimum width thus trying to call that class again under @media with the new min-height pixels but the navbar remains the same height of 150px. Anyway I can get around this? </p>
  
  <p>CSS File</p>
  
  <pre><code>/* works */
  .navbar-min-height{
      min-height: 150px;
  }
  
  @media only screen and (max-width: 768px) {
      /* Not working */
      .navbar-min-height{
          min-height: 30px;
      }
  } 
  </code></pre>
  
  <p>Html Page</p>
  
  <pre><code>&lt;nav class="nav navbar navbar-fixed-top navbar-min-height navbar-custom"&gt;
      ......
  &lt;/nav&gt;
  </code></pre>