Setting bootstrap nav breakpoint to show mobile nav on ipad portrait - css

Question

Having trouble setting the breakpoint for bootstrap nav and sub-nav on iPad portrait and down. I need the navigation to show the mobile version on iPad portrait and iPhone portrait and landscape, but currently stuck with it showing desktop sub-nav on iPad portrait:
So it should appear like this on iPad portrait:
It works in the fiddle here: jsfiddle link, though the collapse doesn't happen until 768px. I can't get it to work, however, in my code.
HTML:
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <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" href="#">Brand</a>
<button type="button" class="btn btn-default profile-btn">Profile</button>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
ABOUT US <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>
<li class="dropdown mega-dropdown">
WHAT WE DO<span class="caret"></span>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-4 image-column">
<ul>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/156x120" class="img-responsive" alt="">
<h4 class="picture-sub">LINK</h4>
</div>
<div class="item active">
<img src="http://placehold.it/156x120" class="img-responsive" alt="">
<h4 class="picture-sub">LINK</h4>
</div>
<div class="item active">
<img src="http://placehold.it/156x120" class="img-responsive" alt="">
<h4 class="picture-sub">LINK</h4>
</div>
</div>
</ul>
</li>
<li class="col-sm-4">
<ul>
<li class="dropdown-header">LINK</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li class="dropdown-header spacer">LINK</li>
<li>Link & Link</li>
<li>Link & Link</li>
<li>Longer link title</li>
<li>Longer link title</li>
<li class="dropdown-header spacer">LINK</li>
<li>Long link title</li>
<li>Long link title</li>
</ul>
</li>
<li class="col-sm-4">
<ul>
<li class="dropdown-header">LINK</li>
<li>long link title</li>
<li>long link title</li>
<li class="dropdown-header spacer">LINK</li>
<li>Really long link title</li>
<li>Longer link title</li>
<li>Link title here</li>
<li class="dropdown-header spacer">LINK</li>
<li>Long link title</li>
<li>Long link title</li>
<li>Long link title</li>
<li>Long link title</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
OUR RESULTS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>LINK</li>
<li>LINK</li>
</ul>
</li>
<li class="dropdown">NEWS</li>
<li class="dropdown">LOCATIONS</li>
<li class="dropdown">CONTACT</li>
</ul>
</div>
</div>
</nav>
CSS:
header {
text-align: center;
background: #f5f5f5;
width: 100%;
height: 50px;
padding: 15px 15px;
}
header .header-brand {
color: #777;
font-size: 18px;
line-height: 20px;
}
header .header-brand:focus,
header .header-brand:hover {
text-decoration: none;
color: #5e5e5e;
}
.navbar .btn.profile-btn,
.navbar .btn.profile-btn:hover,
.navbar .btn.profile-btn:focus {
float: right;
right: 0;
position: absolute;
margin-top: 10px;
background: none;
border: none;
}
.mega-dropdown-menu {
min-width: 800px;
}
#media (max-width: 967px) {
.navbar .navbar-toggle {
float: left;
margin-left: 15px;
}
.icon-bar{
background-color: #000;
}
}

Answer 1

WHAT I DID, I DIDN'T KNOW YOU WERE USING 4 COLUMNS NO MATTER WHAT SO I CHANGED THEM LG 4 XS 12 CHANGED THE MINWIDTH TO 750
HTML
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <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" href="#">Brand</a>
<button type="button" class="btn btn-default profile-btn">Profile</button>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
ABOUT US <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>
<li class="dropdown mega-dropdown">
WHAT WE DO<span class="caret"></span>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-md-4 col-xs-12 image-column">
<ul>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/156x120" class="img-responsive" alt="">
<h4 class="picture-sub">LINK</h4>
</div>
<div class="item active">
<img src="http://placehold.it/156x120" class="img-responsive" alt="">
<h4 class="picture-sub">LINK</h4>
</div>
<div class="item active">
<img src="http://placehold.it/156x120" class="img-responsive" alt="">
<h4 class="picture-sub">LINK</h4>
</div>
</div>
</ul>
</li>
<li class="col-md-4 col-xs-12">
<ul>
<li class="dropdown-header">LINK</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li class="dropdown-header spacer">LINK</li>
<li>Link & Link</li>
<li>Link & Link</li>
<li>Longer link title</li>
<li>Longer link title</li>
<li class="dropdown-header spacer">LINK</li>
<li>Long link title</li>
<li>Long link title</li>
</ul>
</li>
<li class="col-md-4 col-xs-12">
<ul>
<li class="dropdown-header">LINK</li>
<li>long link title</li>
<li>long link title</li>
<li class="dropdown-header spacer">LINK</li>
<li>Really long link title</li>
<li>Longer link title</li>
<li>Link title here</li>
<li class="dropdown-header spacer">LINK</li>
<li>Long link title</li>
<li>Long link title</li>
<li>Long link title</li>
<li>Long link title</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
OUR RESULTS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>LINK</li>
<li>LINK</li>
</ul>
</li>
<li class="dropdown">NEWS</li>
<li class="dropdown">LOCATIONS</li>
<li class="dropdown">CONTACT</li>
</ul>
</div>
</div>
</nav>
CSS
header {
text-align: center;
background: #f5f5f5;
width: 100%;
height: 50px;
padding: 15px 15px;
}
header .header-brand {
color: #777;
font-size: 18px;
line-height: 20px;
}
header .header-brand:focus,
header .header-brand:hover {
text-decoration: none;
color: #5e5e5e;
}
.navbar .btn.profile-btn,
.navbar .btn.profile-btn:hover,
.navbar .btn.profile-btn:focus {
float: right;
right: 0;
position: absolute;
margin-top: 10px;
background: none;
border: none;
}
.mega-dropdown-menu {
min-width:750px;
}
#media (max-width: 967px) {
.navbar .navbar-toggle {
float: left;
margin-left: 15px;
}
}
#media (max-width: 967px) {
.navbar-header {
float: none;
}
.mega-dropdown-menu ul{
display: block;
position: relative;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}

Answer 2

I discovered the solution was to set a new breakpoint:
#media (max-width: 800px){
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
which brings the sub-nav on iPad portrait to the same as iPhone portrait.