2

Actualmente estoy trabajando un menú horizontal pero cuándo reduzco la ventana para que se convierta en un menú desplegable se forma el ícono pero no me despliega las opciones.

El código es el siguiente HTML:

.navbar-brand { position: relative; z-index: 2; }

.navbar-nav.navbar-right .btn { position: relative; z-index: 2; padding: 4px 20px; margin: 10px auto; transition: transform 0.3s; }

.navbar .navbar-collapse { position: relative; overflow: hidden !important; }
.navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 22px; }

.navbar .nav-collapse { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding-right: 120px; padding-left: 80px; width: 100%; }
.navbar.navbar-default .nav-collapse { background-color: #f8f8f8; }
.navbar.navbar-inverse .nav-collapse { background-color: #222; }
.navbar .nav-collapse .navbar-form { border-width: 0; box-shadow: none; }
.nav-collapse>li { float: right; }

.btn.btn-circle { border-radius: 50px; }
.btn.btn-outline { background-color: transparent; }

.navbar-nav.navbar-right .btn:not(.collapsed) {
	background-color: rgb(111, 84, 153);
	border-color: rgb(111, 84, 153);
	color: rgb(255, 255, 255);
}

.navbar.navbar-default .nav-collapse,
.navbar.navbar-inverse .nav-collapse {
	height: auto !important;
	transition: transform 0.3s;
	transform: translate(0px,-50px);
}
.navbar.navbar-default .nav-collapse.in,
.navbar.navbar-inverse .nav-collapse.in {
	transform: translate(0px,0px);
}


@media screen and (max-width: 767px) {
	.navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 15px; padding-right: 15px; } 

	.navbar .nav-collapse { margin: 7.5px auto; padding: 0; }
	.navbar .nav-collapse .navbar-form { margin: 0; }
	.nav-collapse>li { float: none; }

	.navbar.navbar-default .nav-collapse,
	.navbar.navbar-inverse .nav-collapse {
		transform: translate(-100%,0px);
	}
	.navbar.navbar-default .nav-collapse.in,
	.navbar.navbar-inverse .nav-collapse.in {
		transform: translate(0px,0px);
	}

	.navbar.navbar-default .nav-collapse.slide-down,
	.navbar.navbar-inverse .nav-collapse.slide-down {
		transform: translate(0px,-100%);
	}
	.navbar.navbar-default .nav-collapse.in.slide-down,
	.navbar.navbar-inverse .nav-collapse.in.slide-down {
		transform: translate(0px,0px);
	}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container-fluid">
  <!-- Second navbar for profile settings -->
  <nav class="navbar navbar-inverse">
    <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-4">
      <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="#">Menu</a>-->
    </div>
  
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse-4">
      <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Inicio</a></li>
      <li><a href="#">Usuarios</a></li>
      <li><a href="#">Listas</a></li>
      <li><a href="#">Campañas</a></li>
      <li><a href="#">Segmentador</a></li>
      <li><a href="#">Tracking</a></li>
      <li><a href="#">Herramientas</a></li>
      <!--<li><a href="#">Boletin</a></li>
      <li><a href="#">SMS</a></li>-->
      <li><a href="#">Reporte</a></li>
      <li><a href="#">Salir</a></li>
      <li>
        <a class="btn btn-default btn-outline btn-circle collapsed"  data-toggle="collapse" href="#nav-collapse4" aria-expanded="false" aria-controls="nav-collapse4">Perfil <i class=""></i> </a>
      </li>
      </ul>
      <ul class="collapse nav navbar-nav nav-collapse slide-down" role="search" id="nav-collapse4">
      <li><a href="#">Support</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img class="img-circle" src="https://pbs.twimg.com/profile_images/588909533428322304/Gxuyp46N.jpg" alt="maridlcrmn" width="20" /> Maridlcrmn <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
        <li><a href="#">My profile</a></li>
        <li><a href="#">Favorited</a></li>
        <li><a href="#">Settings</a></li>
        <li class="divider"></li>
        <li><a href="#">Logout</a></li>
        </ul>
      </li>
      </ul>
    </div><!-- /.navbar-collapse -->
    </div><!-- /.container -->
  </nav><!-- /.navbar -->
</div><!-- /.container-fluid -->

2
  • 3
    Tienes que cargar la libreria de jQuery antes que la de Bootstrap
    – user7176
    el 25 oct. 2018 a las 13:33
  • 2
    Listo amigo, publica tu respuesta para calificarte como correcta. el 25 oct. 2018 a las 13:34

1 respuesta 1

4

Tienes mal posicionada la libreria jquery, va antes de la libreria js de bootstrap así:

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

.navbar-brand { position: relative; z-index: 2; }

.navbar-nav.navbar-right .btn { position: relative; z-index: 2; padding: 4px 20px; margin: 10px auto; transition: transform 0.3s; }

.navbar .navbar-collapse { position: relative; overflow: hidden !important; }
.navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 22px; }

.navbar .nav-collapse { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding-right: 120px; padding-left: 80px; width: 100%; }
.navbar.navbar-default .nav-collapse { background-color: #f8f8f8; }
.navbar.navbar-inverse .nav-collapse { background-color: #222; }
.navbar .nav-collapse .navbar-form { border-width: 0; box-shadow: none; }
.nav-collapse>li { float: right; }

.btn.btn-circle { border-radius: 50px; }
.btn.btn-outline { background-color: transparent; }

.navbar-nav.navbar-right .btn:not(.collapsed) {
background-color: rgb(111, 84, 153);
border-color: rgb(111, 84, 153);
color: rgb(255, 255, 255);
}

.navbar.navbar-default .nav-collapse,
.navbar.navbar-inverse .nav-collapse {
height: auto !important;
transition: transform 0.3s;
transform: translate(0px,-50px);
}
.navbar.navbar-default .nav-collapse.in,
.navbar.navbar-inverse .nav-collapse.in {
transform: translate(0px,0px);
}


@media screen and (max-width: 767px) {
.navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 15px; padding-right: 15px; } 

.navbar .nav-collapse { margin: 7.5px auto; padding: 0; }
.navbar .nav-collapse .navbar-form { margin: 0; }
.nav-collapse>li { float: none; }

.navbar.navbar-default .nav-collapse,
.navbar.navbar-inverse .nav-collapse {
    transform: translate(-100%,0px);
}
.navbar.navbar-default .nav-collapse.in,
.navbar.navbar-inverse .nav-collapse.in {
    transform: translate(0px,0px);
}

.navbar.navbar-default .nav-collapse.slide-down,
.navbar.navbar-inverse .nav-collapse.slide-down {
    transform: translate(0px,-100%);
}
.navbar.navbar-default .nav-collapse.in.slide-down,
.navbar.navbar-inverse .nav-collapse.in.slide-down {
    transform: translate(0px,0px);
}
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>


<div class="container-fluid">
    
    <!-- Second navbar for profile settings -->
    <nav class="navbar navbar-inverse">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-4">
            <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="#">Menu</a>-->
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-collapse-4">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Usuarios</a></li>
            <li><a href="#">Listas</a></li>
            <li><a href="#">Campañas</a></li>
            <li><a href="#">Segmentador</a></li>
            <li><a href="#">Tracking</a></li>
			<li><a href="#">Herramientas</a></li>
			<!--<li><a href="#">Boletin</a></li>
			<li><a href="#">SMS</a></li>-->
			<li><a href="#">Reporte</a></li>
			<li><a href="#">Salir</a></li>
            <li>
              <a class="btn btn-default btn-outline btn-circle collapsed"  data-toggle="collapse" href="#nav-collapse4" aria-expanded="false" aria-controls="nav-collapse4">Perfil <i class=""></i> </a>
            </li>
          </ul>
          <ul class="collapse nav navbar-nav nav-collapse slide-down" role="search" id="nav-collapse4">
            <li><a href="#">Support</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img class="img-circle" src="https://pbs.twimg.com/profile_images/588909533428322304/Gxuyp46N.jpg" alt="maridlcrmn" width="20" /> Maridlcrmn <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">My profile</a></li>
                <li><a href="#">Favorited</a></li>
                <li><a href="#">Settings</a></li>
                <li class="divider"></li>
                <li><a href="#">Logout</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container -->
    </nav><!-- /.navbar -->
</div><!-- /.container-fluid -->

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.