Force bootstrap nav to mobile view on portrait ipad

Question

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.

CSS:

.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>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;
  }
}

HTML:

    <div class="container">
  <nav class="navbar navbar-fixed-top" role="navigation" style="padding: 0px; margin: 0px;">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand active" href="#"><i class="fa fa-home"></i></a>
      </div>
  <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <form class="navbar-form navbar-left search" role="search">
          <div class="form-group">
            <input class="form-control" placeholder="Search" type="text">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">ABOUT US<span class="caret"></span></a>
            <div class="dropdown-menu row col-lg-3 one-column-navbar" role="menu">
              <div class="col-md-12"><strong>Responsive Column 1</strong> - This is the left column and the information should be contained in this column! </div>
            </div>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">WHAT WE DO<span class="caret"></span></a>
            <div class="dropdown-menu row col-lg-12 three-column-navbar" role="menu">
              <div class="col-md-4"><strong>Responsive Column 1</strong> - This is the left column and the information should be contained in this column! </div>
              <div class="col-md-4"><strong>Responsive Column 2</strong> - This is the center column and the information should be contained in this column!</div>
              <div class="col-md-4"><strong>Responsive Column 2</strong> - This is the center column and the information should be contained in this column!</div>
            </div>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">OUR RESULTS<span class="caret"></span></a>
            <div class="dropdown-menu row col-lg-12 one-column-navbar" role="menu">
              <div class="col-md-12"><strong>Responsive Column 1</strong> - This is the left column and the information should be contained in this column! </div>
            </div>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">NEWS</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">LOCATIONS</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">CONTACT</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

UPDATED FIDDLE: https://jsfiddle.net/f2rhjg0u/4/

Answer 1

Max-width media queries should always be 1px less than the breakpoint. Examples:

@media only screen and (max-width:767px){}
@media only screen and (max-width:991px){}
@media only screen and (max-width:1199px){}

To change vertical stacking, use this:

@media only screen and (max-width: 991px) {
        .nav>li {
            position:relative;
            display:block;
            float:none;
        }
    }