entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

Desplegables en Bootstrap

Hola que tal, tengo un inconveniente con el navbar en mi proyecto, estoy usando bootstrap.
Bueno, cuando minimizo mi página web, el menú se hace pequeño y aparece el botón para desplegar el menú, lo presiono y si despliega pero cuando lo vuelvo a presionar no regresa el menú a su forma normal.

este es mi código me podrían ayudar por favor.

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="#">Brand</a>
                        </div>
                        <div class="navbar-collapse collapse navbar-inverse-collapse">
                            <ul class="nav navbar-nav">
                                <li class="active"><a href="#">Active</a></li>
                                <li><a href="#">Link</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li class="dropdown-header">Dropdown header</li>
                                        <li><a href="#">Separated link</a></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </li>
                            </ul>

                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="#">Link</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

0voto

Joseda85 comentado

Buenas. Edita el código que has puesto. Solo has puesto dos </div>

0voto

carlossevi comentado

A ver si se pasa por aquí @Peter ya que el texto de tu pregunta se está interpretando como código en lugar de mostrarse correctamente y se muestra una barra en la parte superior de la página.

0voto

Peter comentado

Gracias Carlos!

@hanna10 solo tienes que utilizar el icono { } para darle formato al código al hacer las preguntas y puedes editarlas también para corregirlas.

Saludos.

0voto

hanna10 comentado

lo siento, soy nueva en esto y no me di cuenta.
Gracias.

1 Respuesta

2votos

roel_magdaleno Puntos380

Hola, estoy viendo el código y veo que acá:

data-target=".navbar-inverse-collapse"

Lo mandas hacia una clase (.navbar-inverse-collapse) de css, y en la documentación de Bootstrap, llaman a un ID (#bs-example-navbar-collapse-1):

data-target="#bs-example-navbar-collapse-1"

No se si implique porque estas usando una clase y no se si el código en realidad prefiere usar un ID. Lo que puedes hacer es agregar un ID a esta linea de código:

<div class="navbar-collapse collapse navbar-inverse-collapse" id="id-aqui">

Y tu data-target quedaría así:

data-target="#id-aqui"

Saludos.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta