1

Bom dia, eu tenho um menu dropdown(código abaixo, que usa bootstrap, como eu faço pra deixar o fundo transparente, visto que por default ele é branco ? Em qual atributo do CSS eu mexo ?

<html>
    <head>
    <!---- importações -->
    </head>

    <body>
    <li class="dropdown nav-item">
                  <a data-toggle="dropdown" class="dropdown-toggle nav-link js-scroll-trigger">Clientes</a>
                   <ul class="dropdown-menu">
                        <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#"> Depoimentos </a></li>
                        <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">2ª via do boleto </a></li>
                        <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">Atendimento </a></li>
                        <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">Seja um revendedor </a></li>
                    </ul>
                </li>
    </body>
    </html>
2
  • Oi Slyfer, nesse caso tu apenas pode acrescentar mais uma classe no dropdown-menu, "transparent" e fazer a alteração no estilo ou mesmo podendo acrescentar na variables. no caso se fazer no seu estilo e não souber criar na variable faça .dropdown-menu.transparent {} assim não é necessário usar !important se caso a cor branca estiver no li use .dropdown-menu.transparent .nav-item {}
    – Eduardo
    Commented 26/11/2018 às 12:44
  • Entendi, obrigado!
    – user125852
    Commented 26/11/2018 às 12:53

2 Respostas 2

3

Altere a propriedade background-color da classe .dropdown-menu usando a notação rgba se quiser deixar semi-transparente alterando o canal alpha:

body{
   background: yellow !important;
}

.dropdown-menu{
   /* metade transparente: alpha = .5 */
   background-color: rgba(255, 255, 255, .5) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<li class="dropdown nav-item">
   <a data-toggle="dropdown" class="dropdown-toggle nav-link js-scroll-trigger">Clientes</a>
    <ul class="dropdown-menu">
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#"> Depoimentos </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">2ª via do boleto </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">Atendimento </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">Seja um revendedor </a></li>
     </ul>
 </li>

Se quiser totalmente transparente, coloque o valor transparent:

.dropdown-menu{
   background-color: transparent !important;
}

Caso não queira alterar a classe nativa, siga o que informa a resposta do @Renan Osorio.

2
  • Caso queira evitar usar o !important apenas acrescente mais uma classe no dropdown-menu dessa forma não precisará sobrepor a força e sim fará pela nova classe.
    – Eduardo
    Commented 26/11/2018 às 12:48
  • Funcionou perfeitamente, muito obrigado!
    – user125852
    Commented 26/11/2018 às 12:51
2

Tente isso,

.dropdown-menu {
    background-color: transparent;
}
.dropdown .dropdown-menu {
    background-color: transparent;
}

Esse é um exemplo, mas se possível, crie uma classe separada para adicionar o background-color: transparent; para nao afetar o codigo nativo do bootstrap.

1
  • 1
    Funcionou também, obrigado!!
    – user125852
    Commented 26/11/2018 às 12:52

Você deve fazer log-in para responder a esta pergunta.