Nav bar dropdown on mobile Bootstrap

Question

I have a problem with my nav bar with bootstrap when using mobile devices (touch).

If I'm using a computer, the nav bar works fine, but if is a touch device the dropdown is hidden if try to select a option.

<div class="navbar navbar-inverse">
    <div class="navbar-inner">
        <div class="container">
                        <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                        <a class="btn btn-navbar" data-toggle="collapse"
                            data-target=".nav-collapse"> <span class="icon-bar"></span>
                            <span class="icon-bar"></span> <span class="icon-bar"></span>
                        </a>

                        <!-- Be sure to leave the brand out there if you want it shown -->
                        <a class="brand" href="/webga/index/index">Inicio</a>

                        <!-- Everything you want hidden at 940px or less, place within here -->
                        <div class="nav-collapse">
                            <ul class="nav">
                                <li class="dropdown"><a href="#" class="dropdown-toggle"
                                    data-toggle="dropdown" data-target=".nav-collapse">
                                        Cadastros <b class="caret"></b>
                                </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="<c:url value="/empresa/novaEmpresa"/>">Empresa</a></li>
                                        <li><a
                                            href="<c:url value="/empreendedor/novoEmpreendedor"/>">Empreendedor</a></li>
                                        <li><a
                                            href="<c:url value="/empreendimento/novoEmpreendimento"/>">Empreendimento</a></li>
                                        <li><a href="<c:url value="/atividades/novaAtividade"/>">Atividades</a></li>
                                        <li><a
                                            href="<c:url value="/subatividade/novaSubAtividade"/>">Sub-Atividades</a></li>
                                        <li><a
                                            href="<c:url value="/responsavel/novoResponsavel"/>">Responsavel
                                                Técnico</a></li>
                                        <li><a
                                            href="<c:url value="/documentacao/novaDocumentacao"/>">Documentações</a></li>
                                    </ul></li>
                            </ul>
                            <ul class="nav">
                                <li class="dropdown"><a href="#" class="dropdown-toggle"
                                    data-toggle="dropdown"> Consultas <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="<c:url value="/processos/pesquisa"/>">Processos</a></li>
                                        <li><a href="<c:url value="/subatividade/lista"/>">SubAtividades</a></li>
                                        <li><a href="<c:url value="#"/>">Legislações</a></li>
                                        <li><a href="<c:url value="#"/>">Documentos</a></li>
                                    </ul></li>
                            </ul>
                            <ul class="nav">
                                <li class="dropdown"><a href="#" class="dropdown-toggle"
                                    data-toggle="dropdown"> Solicitações <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="<c:url value="#"/>">Licensa
                                                Ambiental/Florestal</a></li>
                                        <li><a href="<c:url value="#"/>">Declaração de
                                                isenção de licensa</a></li>
                                    </ul></li>
                            </ul>
                            <ul class="nav">
                                <li class="dropdown"><a href="#" class="dropdown-toggle"
                                    data-toggle="dropdown"> Relátorios <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="<c:url value="#"/>">Lista de
                                                Atividades/Sub-Atividades</a></li>
                                        <li><a href="<c:url value="#"/>">Solicitações por
                                                Empreendedor</a></li>
                                        <li><a href="<c:url value="#"/>">Solicitações por
                                                Empreendimento</a></li>
                                        <li><a href="<c:url value="#"/>">Solicitações por
                                                Atividade</a></li>
                                        <li><a href="<c:url value="#"/>">Estatística por
                                                Atividade</a></li>
                                        <li><a href="<c:url value="#"/>">Relação dos
                                                Usuarios</a></li>
                                        <li><a href="<c:url value="#"/>">Relação de
                                                Empreendedores e seus Empreendimentos</a></li>
                                    </ul></li>
                            </ul>
                            <ul class="nav">
                                <li class="dropdown"><a href="#" class="dropdown-toggle"
                                    data-toggle="dropdown"> Ajuda <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="<c:url value="#"/>">Informações</a></li>
                                        <li><a href="<c:url value="#"/>">Suporte</a></li>
                                    </ul></li>
                            </ul>
                            <ul class="nav">
                                <li class="dropdown"><a href="#" class="dropdown-toggle"
                                    data-toggle="dropdown"> Sistema <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="<c:url value="/usuario/alterarSenha"/>">Alterar
                                                Senha</a></li>
                                    </ul></li>
                            </ul>
                            <ul class="nav pull-right">
                                <li class="pull-right"><a href="<c:url value="/logout"/>">Logout</a></li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>

Any help is appreciated. Thanks

Answer 1

You probably didn't update to the latest Bootstrap yet, did you?

I wrote a blog post including a temporary fix for this issue here: http://forwebonly.com/fix-for-twitter-bootstrap-dropdown-on-ipad-and-iphone/

But when you update to the latest Bootstrap (version 2.2.2 or higher), this issue should be fixed, as you can read in their changelog.

Here's the rundown on what's new in this release:

...

Dropdowns: Temporary fix added for dropdowns on mobile to prevent them from closing early.