bootstrap navbar in div with width: 40% for ipad - html

Question

I have a simple map site with a sidebar that I can toggle on and off. All works fine on Pc and telephone, but I can't get the responsive navbar functionality to work on a tablet.
Here is the css:
html, body { height: 100%; }
body {
padding-top: 50px;
}
.container-fluid {
margin: 0;
padding: 0;
height:100%;
width: 100%;
}
.map{
width:100%;
height:100%;
}
.sidebar {
position: absolute;
top: 0px;
left: 0px;
height: inherit;
width: 30%;
z-index: 10005;
background-color: #fff;
overflow-y: scroll;
padding-top: 50px;
display: none;
}
/*
* iPad - nav list not complete
*/
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
.sidebar {
width: 40%;
}
}
/*
* Phone - works
*/
#media (max-width: 767px) {
.sidebar {
width: 100%;
}
}
and the html:
<!-- form container -->
<div class="container sidebar" id="form-container">
<nav class="navbar navbar-fixed-top navbar-inverse sidebar-header" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#form-container-navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="form-container-title" class="navbar-brand" href="#">Form</a>
</div><!-- /navbar-header -->
<div id="form-container-navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav ">
<li>Open</li>
<li>Maybe</li>
<li>Whatever</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li><a id="close-form" href="#">Close</a></li>
</ul>
</div><!-- /navbar-collapse -->
</div><!-- container -->
</nav><!-- navbar -->
<form role="form" id="form1">
<div class="form-group">
<label for="species">Species</label>
<input id="species" class="form-control" type="text"/>
</div>
<div class="form-group">
<label for="risk">Risk</label>
<!-- etc, etc -->
On a pc I get a horizontal menu that extends beyond the 'sidebar'. This is fine.
On a phone I get the collapsed menu that I can toggle - also fine.
But on an iPad I get a horizontal menu that works, but I can't see the text that is beyond the width of the .sidebar. Unhelpful.
Ideally I'd get the collapsed menu I can toggle, or a horizontal menu I can see!
Can anyone help?
Thanks
Mini