Blog


Como resolver o collapse do menu bootstrap no IPad!

1 de julho de 2016

Apesar de ainda haver aqueles que defendem o não uso de frameworks front-end como por exemplo o Bootstrap, um dos Frameworks mais utilizados para desenvolvimento de temas para sites. É muito difícil no dia a dia evitar o seu uso, afinal de contas o tempo e a qualidade sempre estão em cheque (leia se tem que se produzir muito mais em menos tempo). Porém, hora ou outra alguns problemas sempre aparecem, e muitas vezes as resoluções podem levar algum tempo para serem resolvidos.

Um dos problemas que quase sempre aconteciam comigo é o collapse de menu no IPad quando usado o framework Bootstrap, o que eu fazia era ir ajustando passo a passo pelo css e deixando o menu da maneira que eu queria. Como sempre o tempo agregado em cada resolução acabava sendo maior do que o tempo que eu tinha disponível para resolver os problemas e nem sempre eram elegantes o suficiente devido a quantidade de “gambiarras”, sendo assim, comecei a busca por melhores soluções, recentemente encontrei uma ótima resposta no StackOverflow do usuário Dmitriy Borisov (Link aqui com outras respostas deste usuário), obviamente após ler e realizar testes vi que realmente resolvia todos os meus problemas.

Segue a solução:

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

Enfim espero ter ajudado, logico que sempre existem opções melhores(Ou não) e o uso pode variar, nos meus casos apenas procurei por soluções mais rapidas, pois assim poderia me concentrar em outros problemas, caso encontrem soluções melhores não deixem de comentar!