1

Resulta que tengo un contenedor que uso debajo de la barra de navegación, y quiero que el desplegable dropdown menu tenga el fondo predefinido en "bg-dark" y "bg-opacity-90" lo que es un gris claro. Además no consigo establecer las letras en negro.

.custom-dropdown:hover .dropdown-menu {
  display: block;
}

.custom-dropdown .dropdown-toggle {
  color: black !important;
  /* Color de texto negro */
  background-color: transparent !important;
  /* Fondo transparente */
  text-decoration: none !important;
  /* Sin subrayado */
}

.custom-dropdown .dropdown-menu {
  background-color: rgb(black, 0.1) !important;
  /* Fondo gris claro */
}

.custom-dropdown .dropdown-item {
  color: black !important;
  /* Color de texto negro */
  text-decoration: none !important;
  /* Sin subrayado */
  background-color: rgb(black, 0.1) !important;
  /* Fondo gris claro */
}

.bg-opacity-90 {
  opacity: 0.1;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid max-width-container position-relative">
  <!-- Primer Contenedor (Barra de opciones) -->
  <div class="row bg-dark bg-opacity-90">
    <div class="col-12">
      <!-- Opciones en la barra alargada -->
      <ul class="list-inline">
        <li class="list-inline-item">
          <div class="custom-dropdown">
            <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">Comunicación</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="">Carnets</a></li>
              <li><a class="dropdown-item" href="#">Opción 2</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

3
  • 1
    Me confunde tu bg-opacity: ¿Por qué está como 0.1 en el CSS? Es más: me parece innecesario que lo declares en tu CSS, ya que bg-opacity está disponible en Bootstrap desde la versión 5.1.0. ¿Por qué no usar lo que ya tiene Bootstrap? De hecho, eliminando eso de tu CSS funciona como esperas (o eso es lo que se entiende de la pregunta).
    – padaleiana
    Commented el 25 ene. a las 10:19
  • Tienes razón, quitando bg-opacity se cambia aunque me vuelve a añadir las flechas, investigare a ver ya que no estoy acotumbrado a trabajar con bootstrap. Commented el 25 ene. a las 10:32
  • Si tienes otros problemas, pulsa en editar para agregarlos a tu pregunta (siempre y cuando tu pregunta no se convierta en una demasiado amplia). Además, procura darle un título descriptivo, para que otras personas que lleguen a tener un problema similar la puedan encontrar.
    – padaleiana
    Commented el 25 ene. a las 11:13

1 respuesta 1

1

Basando la respuesta en los comentarios de la pregunta:

  • El problema se solucionaría simplemente eliminando el CSS agregado para .bg-opacity-90 y utilizar netamente lo que ya provee Bootstrap desde la v5.1.0.

  • Por otra parte, para eliminar la flecha del dropdown, puede crearse una clase personalizada para ello y combinarla con la clase .dropdown-toggle (evitando así utilizar el !important, teniendo en cuenta la especificidad). Como de por sí en este caso ya se creó la clase personalizada .custom-dropdown, bastaría agregar lo siguiente en el CSS:

    .custom-dropdown .dropdown-toggle::after{
      display: none;
    }
    

    En caso de utilizarse SCSS: si no se quiere visualizar la flecha en el dropdown-toggle, en lugar de hacer lo previamente mencionado, debe establecerse la variable $enable-caret en false.


.custom-dropdown:hover .dropdown-menu {
  display: block;
}

.custom-dropdown .dropdown-toggle {
  color: black !important;
  /* Color de texto negro */
  background-color: transparent !important;
  /* Fondo transparente */
  text-decoration: none !important;
  /* Sin subrayado */
  
}

/*para eliminar la flecha ("caret")*/
.custom-dropdown .dropdown-toggle::after{
  display: none;
}

.custom-dropdown .dropdown-menu {
  background-color: rgb(black, 0.1) !important;
  /* Fondo gris claro */
}

.custom-dropdown .dropdown-item {
  color: black !important;
  /* Color de texto negro */
  text-decoration: none !important;
  /* Sin subrayado */
  background-color: rgb(black, 0.1) !important;
  /* Fondo gris claro */
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid max-width-container position-relative">
  <!-- Primer Contenedor (Barra de opciones) -->
  <div class="row bg-dark bg-opacity-90">
    <div class="col-12">
      <!-- Opciones en la barra alargada -->
      <ul class="list-inline">
        <li class="list-inline-item">
          <div class="custom-dropdown">
            <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">Comunicación</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="">Carnets</a></li>
              <li><a class="dropdown-item" href="#">Opción 2</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

No está demás agregar que es mucho mejor basarse en los ejemplos de la documentación, para procurar evitar resultados inesperados.

Si hay otros errores en el CSS, estos no fueron corregidos.

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.