Navbar not collapse on iPad [bootstrap 3]
10,452
You need to change navbar collapse breakpoint.
This is example to change it to 991px
@media (max-width: 991px) {
.navbar-header {
float: none;
}
.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;
}
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
Author by
Juninho C.
Updated on June 08, 2022Comments
-
Juninho C. almost 2 years
Did a responsive layout using bootstrap and everything is working perfectly, but when I visit it via iPad, navbar does not collapse.
Printscreen - preview on iPad:
http://i.stack.imgur.com/RjEJ0.jpg
Below is my HTML / CSS code:
HTML:
<header class="header"> <div class="container"> <nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand scroll-top logo"> <img src="assets/images/logo_cass_eventos.jpg"> </a> </div> <!--/.navbar-header--> <div id="main-nav" class="collapse navbar-collapse"> <ul class="nav navbar-nav" id="mainNav"> <li class="active"><a href="#" class="scroll-link">Home</a></li> <li><a href="#" class="scroll-link">Eventos empresariais</a></li> <li><a href="#" class="scroll-link">Eventos sociais</a></li> <li><a href="#" class="scroll-link">Leme Gourmet</a></li> <li><a href="#" class="scroll-link">Vídeos</a></li> <li><a href="#" class="scroll-link">Depoimentos</a></li> <li><a href="#" class="scroll-link">Imprensa</a></li> <li><a href="#" class="scroll-link">Contato</a></li> </ul> </div> <!--/.navbar-collapse--> </nav> <!--/.navbar--> </div> <!--/.container--> </header>
CSS: