Navbar not collapse on iPad [bootstrap 3]

Question

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:

http://pastebin.com/tE5r6nJ9

Answer 1

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