ipad media query bootstrap dropdown - css

Question

I am using the following media query in my bootstrap app.
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.nav li { width: 100%;
}
.nav .dropdown ul {display:none; }
.nav .open ul { display: block; }
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
text-align: center;
background-color:#211256;
}
.nav-collapse .nav > li > a:hover,
.nav-collapse .dropdown-menu a:hover {
background-color: #211256;
color:white;
}
.navbar .nav > li a:hover{
color:white;
}
.navbar .nav .active > a, .navbar .nav .active > a:hover {
background: #211256;
color: white;
text-decoration: none;
}
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
border-radius: 3px 3px 3px 3px;
color: white;
font-weight: bold;
padding: 6px 15px;
margin-bottom:2px;
}
.navbar .nav li.dropdown .dropdown-toggle .caret, .navbar .nav li.dropdown.open .caret {
border-bottom-color: white;
border-top-color: white;
}
.navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color: transparent;
color: #211256;
}
.accordion-inner {
border-top: 1px solid #E5E5E5;
padding: 9px 15px;
}
}
When viewing the page in landscape mode
http://46.32.253.11/
the dropdown navbar is open by default and I cant see the bootstrap button, I use exactly the same media query for max-width 979px and the button appears and is closed.
Can anyone advise what selector i need to target to have the ipad show the bootstrap button and hide the dropdown menu until the button is pressed.
Any help appreciated

Answer 1

That would require some JavaScript and I'm going to recommend jQuery for sake of simplicity.
Essentially, you're going to listen for the orientationchange event in JavaScript and then, based on the orientation, invoke a function that will handle the toggle.
$(document).ready(function() {
window.onorientationchange = function() {
var orientation = window.orientation;
switch(orientation) {
case 0: // portrait
break;
case 90: // landscape left
toggler();
break;
case -90: // landscape right
toggler();
break;
}
}
function toggler() {
var toggled = false;
$('.dropdown-toggle').on('click', function() {
if (toggled === false) {
$('.nav .open ul').hide();
$('.nav .dropdown ul').show();
toggled = true;
} else {
$('.nav .dropdown ul').hide();
$('.nav .open ul').show();
toggled = false;
}
});
}
});
Try this out and see if it gets you started in the right direction (pun intended).