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
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.