Menu
I am trying to make a nav bar with both, a dropdown-menu which is always visible and a collapsed menu. This works fine on desktop browsers but not on my mobile (android 2.3.6). Here is the code:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Pizzeria & Trattoria </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/bootstrap-modal.js"></script>
<script type="text/javascript" src="js/bootstrap-dropdown.js"></script>
<script type="text/javascript" src="js/bootstrap-collapse.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#autostart').modal('show');
$("a.ref_pics").fancybox({'titlePosition':'inside'});
});
//]]>
</script>
</head>
<body>
<div id="autostart" class="modal hide fade">
<div class="modal-header">
<button class="close" data-dismiss="modal"><i class="icon-remove"></i></button>
<h3> </h3>
</div>
text.... <a data-dismiss="modal" class="btn pull-right" href="#">Cerrar</a>
</div>
<div class="container">
<div class="hero-unit home-bg">
<div class="row">
<div class="span9"><img src="img/logo.png" alt="Pizzeria & Trattoria " /></div>
<div class="span3">
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse" style="float:left;">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<ul class="nav pull-right">
<li class="dropdown last">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">español <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="index.php?lang=es">español</a></li>
<li><a href="index.php?lang=en">english</a></li>
<li><a href="index.php?lang=de">deutsch</a></li>
</ul>
</li>
</ul>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Bienvenida</a></li>
<li><a href="restaurante.php?lang=es">El Restaurante</a></li>
<li><a href="menu.php?lang=es">El Menú</a></li>
<li><a href="chef.php?lang=es">El Chef</a></li>
<li><a href="pizza.php?lang=es">La Pizza</a></li>
<li class="last"><a href="contacto.php?lang=es">Contacto</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</div>
<div class="row extrabottom">
<div class="span9">
<h1>...</h1>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div class="span3 picbar">
<a class="ref_pics" data-rel="group1" href="img/st_titel.jpg"><img src="img/th_titel.jpg" alt="Restaurante " /></a>
<a class="ref_pics" data-rel="group1" href="img/st_kaffee.jpg"><img src="img/th_kaffee.jpg" alt="" /></a>
<a class="ref_pics" data-rel="group1" href="img/gal_387626_R_K_B_by_ermelchen_pixelio.de.jpg"><img src="img/th_pizza.jpg" alt="" /></a>
</div>
</div>
<footer class="well">
<div class="row">
<div class="span6 pull-left"><a href="imprint.php?lang=es#gastro">índice de ilustraciones</a></div>
<div class="span6 pull-right">© </div>
</div>
</footer>
</div> <!-- /container -->
</body>
</html>
The button (three bars) is not clickable in my android browser. Is there a way to bind a onclick to the button which then expands the menu?
Any help is greatly appreciated.
Edit: I gave the collapsible menu an ID and tried to toggle it with a link: <a href="#" onclick="$('#mencol').collapse('toggle')">toggle menu</a>
It works on desktop browsers but not on my android.
I also tried to remove the style="float:left;" from the btn-navbar, again without success.
SOLVED: On a guess I removed the three bootstrap javascripts bootstrap-modal.js, bootstrap-dropdown.js and bootstrap-collapse.js and added the complete bootstrap.min.js. Works like a charm now. Obviously android needs additional functions...
684
asked May 22 '26 01:05
As explained in the question, the solution was to remove the 3 individual jQuery plugins and replace them with bootstrap.min.js
I recommend @Ollie to post the answer himself and accept his answer.
This question has nothing to do in the unanswered section.
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
