Reputation: 21
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
Upvotes: 0
Views: 990
Reputation: 3651
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.
Upvotes: 1