title: Force bootstrap nav to mobile view on portrait ipad
body: <p>I currently have a bootstrap nav that will show the mobile nav hamburger at 768px, but the links don't display in a vertical list until 767px. I need to have the nav display the links the same on mobile portrait and ipad portrait.</p>
  
  <p>CSS:</p>
  
  <pre><code>.navbar-fixed-top {
    background-color: #eee;
  }
  
  .navbar-toggle {
    float: left;
  }
  
  .icon-bar {
    background-color: #000;
  }
  
  .margin-top-ten-px {
    margin-top: 10px;
  }
  
  .margin-bottom-ten-px {
    margin-bottom: 10px;
  }
  
  .full-width-button {
    width: 100%;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  
  
  /*  ----------------------  NAVBAR RENDERING  ---------------------- */
  
  .login-dropdown {
    width: 220px;
    border-top: solid 5px #6cbc42;
    border-left: solid 1px #6cbc42;
    border-right: solid 1px #6cbc42;
    border-bottom: solid 2px #6cbc42;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  
  .two-column-navbar {
    width: 50em;
    height: auto;
    margin: 4px 8px;
    float: right;
    border-top: solid 5px #6cbc42;
    border-left: solid 1px #6cbc42;
    border-right: solid 1px #6cbc42;
    border-bottom: solid 2px #6cbc42;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  
  .three-column-navbar {
    width: 46em;
    height: auto;
    margin: 4px 8px;
    float: right;
  }
  
  .search {
    @include breakpoint(smmax) {
      display: none;
    }
  }
  
  @media only screen and (max-width: 991px) {
    .nav&gt;li {
      position: relative;
      display: block;
      float: none;
    }
    .navbar {
      height: 121px;
    }
    .navbar-brand {
      margin-left: 9%;
    }
    .navbar-right {
      margin-right: 20%!important;
      margin-top: -167px!important;
    }
    .navbar-collapse.collapse {
      display: none !important;
    }
    .navbar-collapse.collapse.in {
      display: block !important;
    }
    .navbar-header .collapse,
    .navbar-toggle {
      display: block !important;
    }
    .navbar-header {
      float: none;
    }
    #bs-example-navbar-collapse-1 {
      background-color: #eee;
    }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div class="container"&gt;
    &lt;nav class="navbar navbar-fixed-top" role="navigation" style="padding: 0px; margin: 0px;"&gt;
      &lt;div class="container"&gt;
        &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&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 active" href="#"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/div&gt;
    &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
        &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
          &lt;form class="navbar-form navbar-left search" role="search"&gt;
            &lt;div class="form-group"&gt;
              &lt;input class="form-control" placeholder="Search" type="text"&gt;
            &lt;/div&gt;
            &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;ABOUT US&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;div class="dropdown-menu row col-lg-3 one-column-navbar" role="menu"&gt;
                &lt;div class="col-md-12"&gt;&lt;strong&gt;Responsive Column 1&lt;/strong&gt; - This is the left column and the information should be contained in this column! &lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;WHAT WE DO&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;div class="dropdown-menu row col-lg-12 three-column-navbar" role="menu"&gt;
                &lt;div class="col-md-4"&gt;&lt;strong&gt;Responsive Column 1&lt;/strong&gt; - This is the left column and the information should be contained in this column! &lt;/div&gt;
                &lt;div class="col-md-4"&gt;&lt;strong&gt;Responsive Column 2&lt;/strong&gt; - This is the center column and the information should be contained in this column!&lt;/div&gt;
                &lt;div class="col-md-4"&gt;&lt;strong&gt;Responsive Column 2&lt;/strong&gt; - This is the center column and the information should be contained in this column!&lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;OUR RESULTS&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;div class="dropdown-menu row col-lg-12 one-column-navbar" role="menu"&gt;
                &lt;div class="col-md-12"&gt;&lt;strong&gt;Responsive Column 1&lt;/strong&gt; - This is the left column and the information should be contained in this column! &lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;NEWS&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;LOCATIONS&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;CONTACT&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATED FIDDLE: <a href="https://jsfiddle.net/f2rhjg0u/4/" rel="nofollow noreferrer">https://jsfiddle.net/f2rhjg0u/4/</a></strong></p>