Anónimo
Dimensionar el menú responsive de bootstrap 3
Me gustaría solicitar tu ayuda con respecto a un tema que ya me tiene loco. Estoy haciendo una web con bootstrap 3 y la verdad es que funciona bastante bien, pero tengo problemas en la visualización del menú en un tablet real (ya que en el pc se ve muy bien y también funciona perfecto) El asunto es que los desplegables de las opciones se tapan con las estructuras que esta debajo, en mi caso con un carrusel.
Me gustaría poder hacer que se colapse el menú en la vista tablet pero no he podido dar con la opción en el Css para realizar esta operación.
Por favor dame una mano con este tema.
1 respuesta
Entiendo lo que me dices pero para poder ayudarte sería mejor que hieras un pantallazo y sobre todo que me muestres el código.
Hay una opción para pegar código. En el menú de edición.
Hola que tal.
Perfecto mira logre subirla hace poco a un hosting gratuito te dejo el link para que puedas ver el problema que tengo con el menú, también te dejo el código que estoy usando.
Link: www.luismiranda.vv.si
este es mi código del index. el menu lo tengo enlazado desde un "include" ,también lo dejare abajo.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Esta es una prueba de diseño responsiv con bootstrap</title>
<meta name="description" content="Poner aqui una descripcion del sitio web">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Comienzo del codigo -->
<!-- encabezado -->
<?php include("includes/encabezado.php"); ?>
<!-- fin del encabezado -->
<!-- Menu de navegación -->
<div class="row-fluid fondomenu">
<?php include("includes/menu.php"); ?>
</div>
<!-- Menu de navegación -->
<!-- slider -->
<div class="row-fluid">
<div class="carousel slide" id="carousel-944600">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-944600">
</li>
<li data-slide-to="1" data-target="#carousel-944600">
</li>
<li data-slide-to="2" data-target="#carousel-944600">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="" src="http://lorempixel.com/1600/500/sports/1" />
<div class="carousel-caption">
<h4>
First Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
<div class="item">
<img alt="" src="http://lorempixel.com/1600/500/sports/2" />
<div class="carousel-caption">
<h4>
Second Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
<div class="item">
<img alt="" src="http://lorempixel.com/1600/500/sports/3" />
<div class="carousel-caption">
<h4>
Third Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
</div> <a class="left carousel-control" href="#carousel-944600" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-944600" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<!-- slider -->
<!-- Miniaturas -->
<div class="row-fluid centrado">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="http://lorempixel.com/1600/500/sports/1" width="250" height="197" alt="...">
<div class="caption">
<h3>lorem ipsum dolor sit amet</h3> <hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, voluptas, harum neque iusto ex eius ipsam explicabo sed quidem velit iure itaque praesentium perferendis nemo quo expedita nam a ipsum.</p>
<p>
<a href="#" class="btn btn-success" role="button">Leer Más</a>
</p>
</div>
</div>
</div>
</div>
<div class="row-fluid centrado">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="http://lorempixel.com/1600/500/sports/2" width="250" height="197" alt="...">
<div class="caption">
<h3>lorem ipsum dolor sit amet</h3> <hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, voluptas, harum neque iusto ex eius ipsam explicabo sed quidem velit iure itaque praesentium perferendis nemo quo expedita nam a ipsum.</p>
<p>
<a href="#" class="btn btn-success" role="button">Leer Más</a>
</p>
</div>
</div>
</div>
</div>
<div class="row-fluid centrado">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="http://lorempixel.com/1600/500/sports/3" width="250" height="197" alt="...">
<div class="caption">
<h3>lorem ipsum dolor sit amet</h3> <hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, voluptas, harum neque iusto ex eius ipsam explicabo sed quidem velit iure itaque praesentium perferendis nemo quo expedita nam a ipsum.</p>
<p>
<a href="#" class="btn btn-success" role="button">Leer Más</a>
</p>
</div>
</div>
</div>
</div>
<!-- Miniaturas -->
<!-- Lateral derecho -->
<div class="row-fluid centrado">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<!-- momento cero de la verdad -->
<h1>Vea un video, en firefox no se ve con un tablet. Y no se por que</h1>
<hr>
<!-- Un video -->
<iframe width="300" height="250" src="//www.youtube.com/embed/r735HvPI1b0" frameborder="0" allowfullscreen></iframe>
<!-- Un video -->
<p>¿y que opina ahora.?</p>
<a href="#" class="btn btn-success" role="button">Nosotros le ayudamos.</a> <br><br>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<!-- Bajada -->
<h2>Lorem ipsum dolor sit amet, consectetur</h2>
<ul class="media-list">
<li class="media">
<a class="pull-left">
<img class="media-object" src="img/logo.png" width="150px" height="150px" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Lo que sea</h4>
<h4>Descripcion corta del asunto.</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, labore nesciunt quod perspiciatis voluptatem vero iure. Eos, officia, culpa, nulla, repellendus quae hic nemo fuga ipsam consectetur eveniet aut vel? <br>
<a href="#" class="btn btn-danger" role="button">Leer Más</a>
<hr>
</div>
</li>
</ul>
</div>
</div>
<!-- Fin del bloque -->
<!-- pie de página -->
<?php include("includes/pie.php"); ?>
<!-- pie de página -->
<!-- Fin del codigo -->
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CODIGO FUENTE DEL MENÚ
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#">Inicio</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<!-- opcion 2 -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">sub-menu<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Opcion 1</a>
</li>
<li>
<a href="#">Opcion 2</a>
</li>
<li>
<a href="#">Opcion 3</a>
</li>
<li>
<a href="#">Opcion 3</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Opcion separada</a>
</li>
</ul>
</li>
<!-- PLANES WEB -->
<!-- otra -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Segundo sub-menu<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Opcion 1</a>
</li>
<li>
<a href="#">Opcion 2</a>
</li>
<li>
<a href="#">Opcion 3</a>
</li>
<li>
<a href="#">Opcion 4</a>
</li>
</ul>
</li>
<!-- sera -->
<!-- xxxx -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Otra más<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Nueva</a>
</li>
<li>
<a href="#">Nueva 2</a>
</li>
</ul>
</li>
<!-- xxx -->
<!-- xxxxxx -->
<li>
<a href="#">Solo</a>
</li>
<!-- xxxxxx -->
<!-- sssssssss -->
<li>
<a href="#">Oto solo</a>
</li>
<!-- xxxxxxx -->
<!-- sssssssssss-->
<li>
<a href="#">Contáctenos</a>
</li>
<!-- cossssssss-->
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- scscscscsc -->
<img src="img/imagen-chat.png" alt="">
<!-- cdccdc -->
</ul>
</div>
</nav>
ESPERO ME PUEDAS DAR UNA MANO. SALUDOS Y GRACIAS.
Bueno se nos hizo un poco tarde. espero que el día de mañana podamos tener solución.
saludos gracias.
He probado en el ordenador y en mi móvil pero no he podido ver el error por que no tengo ahora mismo una tablet.
De todas formas prueba a añadir la propiedad: z-index:-1;
en la clase : .carousel-inner{ }
linea 6333 del bootstrab.css
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
z-index:-1;
}
Espero que esto lo solucione, sino ya seguimos investigando pero esto podría ser un error de bootstrab o del navegador de la tablet.
Si no se arregla dímelo y ya de paso me comentas que tablet estas usando por si acaso.
Suerte y animo que tiene buena pita
Y también puedes darle z-index: 1; para asegurar
En la linea: 4656
.navbar-nav > li > .dropdown-menú {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
z-index: 1;
}
Hola amigo.
Primero te agradezco por tomarte el tiempo de contestar mi pregunta.
ahora si te cuento que realize los cambios que me comentaste y no hay mayor cambio, solamente en firefox que quedo peor que antes jajajaja.
te adjunto captutas de pantallas que tome para que aprecies el problema. Aquí esta el link:
<a>http://luismiranda.vv.si/capturas.php</a>
La tablet desde que la veo es una Aoc (Creo que son chinas), aunque ese no es el problema por que desde una galaxy tab ocurre exactamente los mismo.
Creo que me bastaría con poder achicar el menu, es decir que en la vista "tablet" el menu aparezca colapsado igual que en la vista móvil. de esa manera el problema se resuelve.
¿Sabes como poder manipular esta propiedad?
Saludos y gracias
Las reglas que configuran como se muestra el menú son las "media queries" http://www.w3.org/TR/css3-mediaqueries/ tendrías que poner un valor mínimo más grande para que las apilque en pantallas como la tablet.
Creo que tendrías que cambiarlo en todas la reglas css que aparece:
@media (min-width: 768px){
...
}
Por otro lado, si no lo haces ya, te aconsejo que uses las herramientas de depuración del chrome o de firefox. Botón derecho e inspeccionar elemento así ves que reglas se están aplicando y te permite editarlas y ver el resultado en tiempo real.
No creo que sea esto pero ¿has probado a no cargar la librería de modernzr?
U saludo