1

Hola quería saber como puedo dejar abierto este menú dropdown que esta hecho en bootrstrap 4.

.categoria-prod #collapsingNavbar .dropdown .dropdown-menu{
  position: absolute;
  transform: translate3d(0px, 41px, 0px);
  top: -43px!important;
  left: 252px!important;
  will-change: transform;
  background: #868686;
  border-radius: initial;
  color: #fff;
      padding-top: 0;
    padding-bottom: 0;
}

.categoria-prod #collapsingNavbar .dropdown .hijas-de-hijas{
   position: absolute;
  transform: translate3d(0px, 41px, 0px);
  top: -42px!important;
  left: 218px!important;
  will-change: transform;
  background: #868686;
  border-radius: initial;
  color: #fff;
  font-size: 14px;
      padding-top: 0;
    padding-bottom: 0; 
}
  .categoria-prod #collapsingNavbar .dropdown-item.active, .dropdown-item:active{
    background-color: #f5131f;
    color: #fff!important
  }
.categoria-prod #collapsingNavbar .dropdown .dropdown-menu a{
  color: #fff;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.categoria-prod #collapsingNavbar .dropdown .dropdown-menu a:hover{
  color: #000;
    background: #fff;
}
.categoria-prod .bg-prod{
	background-color: #f5131f;
}
.categoria-prod .bg-prod .navbar-brand{
	font-size: 17px;
}
.navbar-dark .navbar-toggler{
	color: #fff;
	border-color:transparent!important;
	outline: none
}
.navbar-dark .navbar-toggler:hover{
  opacity: 0.7
}
.navbar-toggler{
	padding: 3px 10px!important;
  font-size: 26px!important;
  color: #fff;
  outline: none
}
.categoria-prod .btn-category{
	background-color: #ededed;
	border-radius: initial;
	font-size: 15px;
	color: #565656;
	padding: 0.5rem 0.75rem;
	border-color: #bebebe;
}
.dropdown-toggle::after {
    display: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="container categoria-prod pt-3 pt-lg-0">
  <div class="row">
    <div class="col-lg-3 p-0 pl-lg-0 pr-lg-3">
      <div class=" navbar-dark bg-prod">
        <div class="p-2 px-lg-3 py-lg-3">
          <a class="navbar-brand" href="#">Productos</a>
          <button class="navbar-toggler float-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
							        <i class="fas fa-list-ul"></i>
							    </button>
        </div>

        <div class="navbar-collapse collapse px-3 py-2" id="collapsingNavbar">
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							          Hierro
							          <span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
							        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							          Chapas
							          <span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
							        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Chapa Acanalada 
							          <span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
							          </a>
                <div class="dropdown-menu hijas-de-hijas" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="single.html">Chapas prepintadas  </a>
                  <a class="dropdown-item" href="#">Chapas prepintadas  </a>
                  <a class="dropdown-item" href="#">Chapas prepintadas  </a>
                </div>
                <a class="dropdown-item" href="#">Chapa Acanalada dasdda </a>
                <a class="dropdown-item" href="#">Chapa Acanalada  dasdsad </a>
              </div>
            </li>

            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							          Perfiles
							          <span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
							        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							          Tubos y Caños
							          <span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
							        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							          Metal desplegado y Rejillas
							          <span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
							        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Mallas metálicas</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Aislaciones y membranas</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Clavos y tornillos</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Alambres y tejidos</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Todo para herrería</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Soldadoras</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Herramientas eléctricas </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

2 respuestas 2

1

Renderizado abierto, se cierra y se abre si clikeas

En el div con id "collapsingNavbar", debes agregar la clase "show" para que el nav-bar se cargue abierto. Quedaría así:

<div class="navbar-collapse collapse show px-3 py-2" id="collapsingNavbar">

Si le vuelves a hacer click se cerrara y seguirá su comportamiento normal.


Renderizado abierto y no se cierra

Ahora bien si quieres que cargue abierto y nunca se cierre ni se abra de manera definitiva, agrega la clase del div con id "collapsingNavbar" y el data-target del botón siguiente:

<button class="navbar-toggler float-right" type="button" data-toggle="collapse" data-target="">

Ejemplo completo:

Así quedarian agregando solo la clase "show"

.categoria-prod #collapsingNavbar .dropdown .dropdown-menu{
  position: absolute;
  transform: translate3d(0px, 41px, 0px);
  top: -43px!important;
  left: 252px!important;
  will-change: transform;
  background: #868686;
  border-radius: initial;
  color: #fff;
      padding-top: 0;
    padding-bottom: 0;
}

.categoria-prod #collapsingNavbar .dropdown .hijas-de-hijas{
   position: absolute;
  transform: translate3d(0px, 41px, 0px);
  top: -42px!important;
  left: 218px!important;
  will-change: transform;
  background: #868686;
  border-radius: initial;
  color: #fff;
  font-size: 14px;
      padding-top: 0;
    padding-bottom: 0; 
}
  .categoria-prod #collapsingNavbar .dropdown-item.active, .dropdown-item:active{
    background-color: #f5131f;
    color: #fff!important
  }
.categoria-prod #collapsingNavbar .dropdown .dropdown-menu a{
  color: #fff;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.categoria-prod #collapsingNavbar .dropdown .dropdown-menu a:hover{
  color: #000;
    background: #fff;
}
.categoria-prod .bg-prod{
	background-color: #f5131f;
}
.categoria-prod .bg-prod .navbar-brand{
	font-size: 17px;
}
.navbar-dark .navbar-toggler{
	color: #fff;
	border-color:transparent!important;
	outline: none
}
.navbar-dark .navbar-toggler:hover{
  opacity: 0.7
}
.navbar-toggler{
	padding: 3px 10px!important;
  font-size: 26px!important;
  color: #fff;
  outline: none
}
.categoria-prod .btn-category{
	background-color: #ededed;
	border-radius: initial;
	font-size: 15px;
	color: #565656;
	padding: 0.5rem 0.75rem;
	border-color: #bebebe;
}
.dropdown-toggle::after {
    display: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="container categoria-prod pt-3 pt-lg-0">
  <div class="row">
    <div class="col-lg-3 p-0 pl-lg-0 pr-lg-3">
      <div class=" navbar-dark bg-prod">
        <div class="p-2 px-lg-3 py-lg-3">
          <a class="navbar-brand" href="#">Productos</a>
          <button class="navbar-toggler float-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
							        <i class="fas fa-list-ul"></i>
							    </button>
        </div>

        <div class="navbar-collapse collapse show px-3 py-2" id="collapsingNavbar">
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							          Hierro
							          <span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
							        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							          Chapas
							          <span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
							        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Chapa Acanalada 
							          <span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
							          </a>
                <div class="dropdown-menu hijas-de-hijas" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="single.html">Chapas prepintadas  </a>
                  <a class="dropdown-item" href="#">Chapas prepintadas  </a>
                  <a class="dropdown-item" href="#">Chapas prepintadas  </a>
                </div>
                <a class="dropdown-item" href="#">Chapa Acanalada dasdda </a>
                <a class="dropdown-item" href="#">Chapa Acanalada  dasdsad </a>
              </div>
            </li>

            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							          Perfiles
							          <span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
							        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							          Tubos y Caños
							          <span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
							        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							          Metal desplegado y Rejillas
							          <span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
							        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Mallas metálicas</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Aislaciones y membranas</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Clavos y tornillos</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Alambres y tejidos</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Todo para herrería</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Soldadoras</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Herramientas eléctricas </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

Así quedaría, agregando la clase "show" y el data-target (se renderiza abierto y no se puede cerrar) :

.categoria-prod #collapsingNavbar .dropdown .dropdown-menu{
  position: absolute;
  transform: translate3d(0px, 41px, 0px);
  top: -43px!important;
  left: 252px!important;
  will-change: transform;
  background: #868686;
  border-radius: initial;
  color: #fff;
      padding-top: 0;
    padding-bottom: 0;
}

.categoria-prod #collapsingNavbar .dropdown .hijas-de-hijas{
   position: absolute;
  transform: translate3d(0px, 41px, 0px);
  top: -42px!important;
  left: 218px!important;
  will-change: transform;
  background: #868686;
  border-radius: initial;
  color: #fff;
  font-size: 14px;
      padding-top: 0;
    padding-bottom: 0; 
}
  .categoria-prod #collapsingNavbar .dropdown-item.active, .dropdown-item:active{
    background-color: #f5131f;
    color: #fff!important
  }
.categoria-prod #collapsingNavbar .dropdown .dropdown-menu a{
  color: #fff;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.categoria-prod #collapsingNavbar .dropdown .dropdown-menu a:hover{
  color: #000;
    background: #fff;
}
.categoria-prod .bg-prod{
	background-color: #f5131f;
}
.categoria-prod .bg-prod .navbar-brand{
	font-size: 17px;
}
.navbar-dark .navbar-toggler{
	color: #fff;
	border-color:transparent!important;
	outline: none
}
.navbar-dark .navbar-toggler:hover{
  opacity: 0.7
}
.navbar-toggler{
	padding: 3px 10px!important;
  font-size: 26px!important;
  color: #fff;
  outline: none
}
.categoria-prod .btn-category{
	background-color: #ededed;
	border-radius: initial;
	font-size: 15px;
	color: #565656;
	padding: 0.5rem 0.75rem;
	border-color: #bebebe;
}
.dropdown-toggle::after {
    display: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="container categoria-prod pt-3 pt-lg-0">
  <div class="row">
    <div class="col-lg-3 p-0 pl-lg-0 pr-lg-3">
      <div class=" navbar-dark bg-prod">
        <div class="p-2 px-lg-3 py-lg-3">
          <a class="navbar-brand" href="#">Productos</a>
          <button class="navbar-toggler float-right" type="button" data-toggle="collapse" data-target="">
							        <i class="fas fa-list-ul"></i>
							    </button>
        </div>

        <div class="navbar-collapse collapse show px-3 py-2" id="collapsingNavbar">
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							          Hierro
							          <span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
							        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							          Chapas
							          <span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
							        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Chapa Acanalada 
							          <span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
							          </a>
                <div class="dropdown-menu hijas-de-hijas" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="single.html">Chapas prepintadas  </a>
                  <a class="dropdown-item" href="#">Chapas prepintadas  </a>
                  <a class="dropdown-item" href="#">Chapas prepintadas  </a>
                </div>
                <a class="dropdown-item" href="#">Chapa Acanalada dasdda </a>
                <a class="dropdown-item" href="#">Chapa Acanalada  dasdsad </a>
              </div>
            </li>

            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							          Perfiles
							          <span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
							        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							          Tubos y Caños
							          <span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
							        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							          Metal desplegado y Rejillas
							          <span class="fa fa-chevron-right float-right mt-1" aria-hidden="true"></span>
							        </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Mallas metálicas</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Aislaciones y membranas</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Clavos y tornillos</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Alambres y tejidos</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Todo para herrería</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Soldadoras</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Herramientas eléctricas </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

10
  • Hola federico, y en caso que se muestre abierto pero quiera cerrarlo? ya ahí seria con javascript no?
    – MarianoF
    el 14 jun. 2018 a las 20:04
  • pero en el ejemplo que subiste no lo tiene puesto, osea esta vacio
    – MarianoF
    el 14 jun. 2018 a las 20:08
  • entonces vos decis que se va cerrar si yo lo dejo asi: <div class="navbar px-3 py-2" id="collapsingNavbar"> ?? porque probe y nada
    – MarianoF
    el 14 jun. 2018 a las 20:22
  • Ahí cambie de approach a uno más correcto. Y te añadí el ejemplo que se cierra para que lo veas funcionando. el 15 jun. 2018 a las 0:12
  • ahh ahora comprendí lo que hiciste, muchas gracias Federico.
    – MarianoF
    el 15 jun. 2018 a las 11:53
0

muchas gracias, busqué la solución para que mi navbar siempre aparezca desplegado y solo aquí se me aclaro las dudas.

    <nav class="navbar d-md-block">
    <br>
    <a class="navbar-brand texto_prop" href="#"><img src="img/logo.png"alt="" width="70"></a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon active"></span>
   </button>
    <div class="collapse navbar-collapse show" id="navbarNavAltMarkup">
    <div class="navbar-nav">
    <a class="nav-link active boton_p" href="principal.php">IR A INICIO 
    <span class="sr-only"></span></a>
    <a class="nav-link active boton_p" href="../public/registraUsuario.php">REGISTRAR USUARIO <span class="sr-only"></span></a>
    <a class="nav-link active boton_p" href="index.php">SALIR<span class="sr-only"></span></a>

     </div>
     </div>
     </nav>
1
  • Hola es esto una pregunta? si es así deberías crear una pregunta nueva no usar un a existente. Si esto es una respuesta lo suyo sería añadir una explicación de como funciona y los detalles de la respuesta, no solo código.
    – nax
    el 23 nov. 2020 a las 8:15

Tu Respuesta

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

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