I have this code:
<div class="navbar">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<ul class="nav">
<li>Startseite</li>
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Produkte<b class="caret"> </b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
</ul>
</li>
<li class="dropdown">
<a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Produkte<b class="caret"> </b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
it shoud show up like this:
but it is showing up like this in my code(i click on produkte):
this is my header in html:
<link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">
<script src="{{STATIC_URL}}js/jquery191.js"></script>
<script src="{{STATIC_URL}}js/bootstrap.min.js"></script>
why is this? can someone please help me?
thanks a lot
you have used float:left for li you need to remove it from you custom css file.
Related
I have been using bootstrap for a while, and I came across an issue when trying to add a dropdown menu dynamically.
This is the JavaScript that I have:
$(document).ready(function() {
$("#clickHere").click(function(){
$("#appendHere").html("<div class=\"dropdown\" style=\"display:inline;\"><a id=\"drop1\" href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\"><b class=\"caret\"></b></a><ul class=\"dropdown-menu pull-left\"><li><button>Analyse Now</button></li><li class=\"divider\"></li><li><button>Analyse Later</button></li></ul></div>");
});
$('#drop1').on('click', function(e){
e.stopPropagation();
$(".dropdown-toggle").dropdown('toggle');
});
});
Here is the HTML:
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu pull-left"> <a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu" id="mainMenu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
<button id="clickHere">Click here </button>
<div id="appendHere"></div>
Here is the fiddle
http://jsfiddle.net/szx4Y/83/
The dropdown added dynamically does not work properly. I have managed to make it work in my code, but it only appears once anyway.
Can anyone help me out?
Thanks!
Here is a working jsFiddle: http://jsfiddle.net/szx4Y/85/.
FYI, your jsFiddle didn't work because you didn't include the Bootstrap script file. So if you were doing any testing there that wouldn't have worked.
I changed your code to call $(".dropdown-toggle").dropdown(); immediately after you append your HTML. By calling that method you are setting up the elements to handle all the Bootstrap functionality (click events, etc); there's no reason to call it every time you click your new element.
Relevant Code
HTML
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu pull-left"> <a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu" id="mainMenu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
<button id="clickHere">Click here </button>
<div id="appendHere"></div>
Javascript
$(document).ready(function() {
$("#clickHere").click(function(){
$("#appendHere").html("<div class=\"dropdown\" style=\"display:inline;\"><a id=\"drop1\" href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\"><b class=\"caret\"></b></a><ul class=\"dropdown-menu pull-left\"><li><button>Analyse Now</button></li><li class=\"divider\"></li><li><button>Analyse Later</button></li></ul></div>");
});
$('.dropdown-toggle').dropdown();
});
CSS
.dropdown-menu {
float:right;
}
Hi developers , My Angular2 project i try bootstrap dropdown "Mail" is working but
second dropdown not working
Here is an example of nested dropdown.
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I have 2 dropdown menu items under single parent dropdown class. But when I click dropdown action 1 then it is showing the body of dropdown menu 2 items.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container">
<h2>Dropdown Example</h2>
<p>The <strong>toggle</strong> method toggles the dropdown.</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example 1
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
<br>
<br>
<button class="btn btn-primary dropdown-toggle" id="menu2" type="button" data-toggle="dropdown">Dropdown Example 2
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div><br>
<p><strong>Note:</strong> For dropdowns, you should always include the data-toggle="dropdown" attribute. Do not rely solely on the toggle method, as it may not work as expected in all browsers.</p>
</div>
<script>
$(document).ready(function(){
$(".dropdown-toggle").dropdown("toggle");
});
</script>
</body>
</html>
Here is the fiddle link: https://jsfiddle.net/ajay1008/jumpgkfc/
So I want to open their respective body dropdown-menus.
you must wrap each dropdown button in another .btn-group.
<div class="btn-group"> <button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" open'">Dropdown Example 1
<span class="caret"></span></button>...</div>
mycode(you can copy this code):
https://jsfiddle.net/rezajafari2a/c1yw3hbv/
I'm desperate. I've followed all the advices on the others post about this problem:
I've tried to use ng-cloak or class="ng-cloak" , to add this rule to css
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
But nothing to do , the directive doesn't work.
Can someone help me? Is there an alternative to ng-cloak?
I'm developing a very big portal with liferay , the page needs a lot of time to be loader , so it is fundamental for me to use something like ng-cloak!!
Thanks
This is a page for example:
I'm using Liferay with AngularJS
<div class="navbar ng-cloak" style="display:hidden;" ng-style="loaded" ng-controller="NavBarController">
<div class="navbar-inner ng-cloak" ng-show="navbarScope.menuEpermessiRetrieved" >
<div class="container ng-cloak" style="width: auto;" ng-show="navbarScope.showNavbar" ng-cloak>
<!-- navbar per acquisitore -->
<ul class="nav ng-cloak" role="navigation" id="navigatorAcquisitore" ng-if="navbarscope.isAcquisitore">
<%-- <li role="presentation" ng-hide="${isAcquisizione}" ><a role="menuitem" tooltip="{{navbarScope.acquisizione.description}}" tabindex="-1" href="${goToAcquisizioneURL}" >{{navbarScope.acquisizione.title}} </a> </li> --%>
<li class="active ng-cloak" role="presentation" ng-if="navbarscope.isAcquisitore" ><a role="menuitem" tabindex="-1" href="${goToAcquisizioneURL}" class="ng-cloak">{{navbarScope.acquisizione.title}} </a></li>
</ul>
<a class="brand ng-cloak" id="toolTipHome" ng-if="!navbarScope.isAcquisitore" href="${goToHomeURL}">
<i class="ng-cloak glyphicon glyphicon-home" tooltip="{{navbarScope.brand.description}}" data-toggle="tooltip" data-placement="bottom" title="{{navbarScope.brand.description}}"></i>
</a>
<!-- navbar standard -->
<ul class="nav ng-cloak" role="navigation" ng-if="!navbarScope.isAcquisitore">
<ul class="nav ng-cloak" id="menuAttivita" ng-if="navbarScope.menuAttivita">
<li class="ng-cloak" role="presentation" ng-hide="${isAttivita}"><a role="menuitem" class="ng-cloak" tooltip="{{navbarScope.menuAttivita.description}}" tabindex="-1" href="${goToAttivitaURL}">{{navbarScope.menuAttivita.title}} </a></li>
<li class="active ng-cloak" role="presentation" ng-show="${isAttivita}"><a c role="menuitem" tooltip="{{navbarScope.menuAttivita.description}}" class="ng-cloak" tabindex="-1" href="${goToAttivitaURL}">{{navbarScope.menuAttivita.title}}</a></li>
<%-- <li id="fat-menu" class="dropdown active" ng-show="${isAttivita}"> --%>
<!-- {{navbarScope.menuAttivita.title}} <b class="caret"></b> -->
<!-- <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> -->
<!-- <li role="presentation" ng-repeat="action in navbarScope.menuAttivita.actions" ><a role="menuitem" tabindex="-1" href="" ng-click="exec(action.action)" ng-cloak>{{action.name}}</a></li> -->
<!-- </ul> -->
<!-- </li> -->
</ul>
<!-- area di lavoro -->
<li role="presentation" class="ng-cloak" ng-hide="${isAreaDiLavoro}"><a class="ng-cloak" role="menuitem" tooltip="{{navbarScope.areaDiLavoro.description}}" tabindex="-1" href="${goToAreaDiLavoroURL}" >{{navbarScope.areaDiLavoro.title}}</a></li>
<li class="active ng-cloak" role="presentation" ng-show="${isAreaDiLavoro}"><a class="ng-cloak" role="menuitem" tooltip="{{navbarScope.brand.description}}" tabindex="-1" href="${goToAreaDiLavoroURL}" ng-click="hideMenu()" >{{navbarScope.areaDiLavoro.title}}</a></li>
<!-- area archivio -->
<li role="presentation" class="ng-cloak" ng-hide="${isDocumenti}"><a role="menuitem" tooltip="{{navbarScope.areaArchivio.description}}" tabindex="-1" href="${goToDocumentiURL}" class="ng-cloak" >{{navbarScope.areaArchivio.title}}</a></li>
<li class="active ng-cloak" role="presentation" ng-show="${isDocumenti}"><a role="menuitem" class="ng-cloak" tooltip="{{navbarScope.brand.description}}" tabindex="-1" href="#" >{{navbarScope.areaArchivio.title}}</a></li>
</ul>
<!-- menu fascicolo standard -->
<ul id="navigatorStandard" class="nav ng-cloak" ng-if="navbarScope.mostraFascicoliStandard" >
<li class="dropdown ng-cloak" ng-if="!${isFascicoloStandardCreate} && !${isFascicoloStandardSearch}" >
<a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliStandard.description}} " >
{{navbarScope.fascicoliStandard.title}} <b class="caret ng-cloak"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3">
<li role="presentation " class="ng-cloak" ng-if="navbarScope.fsCreateAllowed">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFStandardCreateURL}" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fsSearchAllowed">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFStandardSearchURL}" > Ricerca </a>
</li>
</ul>
</li>
<li class="dropdown active ng-cloak" ng-if="${isFascicoloStandardCreate} || ${isFascicoloStandardSearch}" >
<a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliStandard.description}} " >
{{navbarScope.fascicoliStandard.title}} <b class="caret"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3">
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fsCreateAllowed && !${isFascicoloStandardCreate}">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFStandardCreateURL}" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fsCreateAllowed && ${isFascicoloStandardCreate}">
<a role="menuitem" class="ng-cloak" tabindex="-1" ng-click="showCreaFascicoloStandard()" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fsSearchAllowed && !${isFascicoloStandardSearch}">
<a role="menuitem" tabindex="-1" href="${goToFStandardSearchURL}" class="ng-cloak" > Ricerca </a>
</li>
<li class="ng-cloak" role="presentation" ng-if="navbarScope.fsSearchAllowed && ${isFascicoloStandardSearch}">
<a role="menuitem" tabindex="-1" class="ng-cloak" ng-click="backToRicerca()" > Ricerca </a>
</li>
</ul>
</li>
</ul>
<!-- menu fascicoli del personale-->
<ul class="nav ng-cloak" id="navigatorPersonale" ng-if="navbarScope.mostraFascicoli">
<li class="dropdown ng-cloak" ng-if="!${isFascicoloPersonaleCreate} && !${isFascicoloPersonaleSearch}" >
<a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliPersonale.description}} " >
{{navbarScope.fascicoliPersonale.title}} <b class="caret"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3">
<li role="presentation" ng-if="navbarScope.fpCreateAllowed" class="ng-cloak">
<a role="menuitem" tabindex="-1" class="ng-cloak" href="${goToFPersonaleCreateURL}" > Crea </a>
</li>
<li class="ng-cloak" role="presentation" ng-if="navbarScope.fpSearchAllowed">
<a class="ng-cloak" role="menuitem" tabindex="-1" href="${goToFPersonaleSearchURL}" > Ricerca </a>
</li>
</ul>
</li>
<li class="dropdown active ng-cloak" ng-if="${isFascicoloPersonaleCreate} || ${isFascicoloPersonaleSearch}" >
<a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliPersonale.description}} " >
{{navbarScope.fascicoliPersonale.title}} <b class="caret"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3">
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fpCreateAllowed && !${isFascicoloPersonaleCreate}">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFPersonaleCreateURL}" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fpCreateAllowed && ${isFascicoloPersonaleCreate}">
<a role="menuitem" class="ng-cloak" tabindex="-1" ng-click="goToCrea()" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fpSearchAllowed && !${isFascicoloPersonaleSearch}">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFPersonaleSearchURL}" > Ricerca </a>
</li>
<li class="ng-cloak" role="presentation" ng-if="navbarScope.fpSearchAllowed && ${isFascicoloPersonaleSearch}">
<a class="ng-cloak" role="menuitem" tabindex="-1" ng-click="goToCerca()" > Ricerca </a>
</li>
</ul>
</li>
<%-- <li role="presentation" ng-hide="${isFascicoloPersonale}" ><a role="menuitem" tooltip="{{navbarScope.fascicoliPersonale.description}}" tabindex="-1" href="${goToFascicoloPersonaleURL}" ng-cloak>{{navbarScope.fascicoliPersonale.title}} <b class="caret" ></b></a></li> --%>
<%-- <li id="fat-menu" class="dropdown active" ng-show="${isFascicoloPersonale}"> --%>
<!-- <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown" ng-cloak>{{navbarScope.fascicoliPersonale.title}} <b class="caret" ></b></a> -->
<!-- <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> -->
<!-- <li role="presentation" ng-repeat="action in navbarScope.fascicoliPersonale.actions" ><a role="menuitem" tabindex="-1" href="" ng-click="exec(action.action)" ng-cloak>{{action.name}}</a></li> -->
<!-- </ul> -->
<!-- </li> -->
</ul>
<ul class="nav pull-right ng-cloak" id="listaUffici">
<li id="fat-listaUffici-menu" class="dropdown ng-cloak" >
<a href="#" id="drop6" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" title="{{navbarScope.ufficioSelected.nomeUnitaOrganizzativa}} " >{{navbarScope.ufficioSelected.displayName}}
<b class="caret ng-cloak" ng-show="navbarScope.listaUffici.length>1"></b></a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop6" ng-show="navbarScope.listaUffici" >
<li role="presentation" class="ng-cloak" ng-repeat="u in navbarScope.listaUffici" class="ng-cloak"><a role="menuitem" tabindex="-1" href="" ng-click="navbarScope.cambiaUfficio(u)" title="{{u.nomeUnitaOrganizzativa}}" >{{u.displayName}}</a>
</li>
</ul>
</li>
<li id="fat-listaRuoli-menu" class="dropdown ng-cloak" >
<a href="#" id="drop7" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" title="{{navbarScope.ruoloSelected.codice}}" >{{navbarScope.ruoloSelected.codice}}
<b class="caret ng-cloak" ng-show="navbarScope.ufficioSelected.ruoli.length>1"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop7" >
<li role="presentation" ng-repeat="r in navbarScope.ufficioSelected.ruoli" class="ng-cloak" >
<a role="menuitem" class="ng-cloak" tabindex="-1" href="" ng-click="navbarScope.cambiaRuolo(r)" title="{{r.codice}}" >{{r.codice}}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
There is some reason you need the "style" attribute? This style overrides the class css code and if is present it will always be "display:hidden".
As a quick&dirty option you can use ng-if to show/hide html code. Remove all ng-cloack and the style attribute and use:
<div ng-if="loadEnded"> content </div>
I used it in a portlet with liferay 6.2/angular 1.4 and it works.
I have been researching for a while now and could not find a solution for this nor any related question to my issue, So sorry if this was already asked before.
I'm developing a website using Twitter Bootstrap 2.3 and I have an issue with the collapsible menu component in Android (tested using Samsung Galaxy s4 with android 4.2 on Chrome latest version).
When I "uncollapse" the menu for the first time, the components works as expected, but if I collapse it, and then "uncollapse" it again, the links appear like "hidden". I can still touch them and the links work as expected. But nothing is displayed, as if they where transparent or something.
Did anybody experience an issue like this one? Any help would be appreciatted.
I have found a solution to this. It is kinda rough though.
This was my html markup:
<div id="navContainer" class="nav-collapse navbar-responsive-collapse in collapse" style="height: auto;">
<ul id="headerNav" class="nav green">
<li class="active"><a class="headerLink" href="/es">El Pueblo</a></li>
<li><a class="headerLink" href="#">Cómo llegar</a></li>
<li><a class="headerLink" href="/es/noticias">Noticias</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop1" role="button" data-toggle="dropdown" href="#">Turismo <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu green" role="menu" aria-labelledby="drop1">
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/historia">Historia</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Actividades</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/info">Info General</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/paseos">Paseos</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Imágenes</a></li>
</ul>
</li>
<li><a class="headerLink" href="/es/mapas">Mapa Interactivo!</a></li>
<li><a class="headerLink" href="#">Contacto</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop3" role="button" data-toggle="dropdown" href="#">Idioma <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu green" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/es/">Español</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/en/">English</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/de/">Deutsch</a></li>
</ul>
</li>
</ul>
</div>
This is the fix that worked for me:
.nav-collapse {
-webkit-transform: none !important;
z-index: 1 !important;
}
This issue was only present in Android using Chrome. On IOS the issue was not there
I have found a solution to this. It is kinda rought thouth.
This was my html markup:
<div id="navContainer" class="nav-collapse navbar-responsive-collapse in collapse" style="height: auto;">
<ul id="headerNav" class="nav green">
<li class="active"><a class="headerLink" href="/es">El Pueblo</a></li>
<li><a class="headerLink" href="#">Cómo llegar</a></li>
<li><a class="headerLink" href="/es/noticias">Noticias</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop1" role="button" data-toggle="dropdown" href="#">Turismo <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu green" role="menu" aria-labelledby="drop1">
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/historia">Historia</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Actividades</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/info">Info General</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/paseos">Paseos</a></li>
<li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Imágenes</a></li>
</ul>
</li>
<li><a class="headerLink" href="/es/mapas">Mapa Interactivo!</a></li>
<li><a class="headerLink" href="#">Contacto</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop3" role="button" data-toggle="dropdown" href="#">Idioma <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu green" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/es/">Español</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/en/">English</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/de/">Deutsch</a></li>
</ul>
</li>
</ul>
</div>
This is the fix that worked for me:
.nav-collapse {
-webkit-transform: none !important;
z-index: 1 !important;
}
This issue was only present in Android using Chrome. On IOS the issue was not there