Transparent DropDown with bootstrap 4

Question

Transparent DropDown with bootstrap 4

Navigation

#1 by (3 votes)
#2 by (3 votes)

2

Good morning, I have a dropdown menu (code below, which uses bootstrap, how do I make the background transparent, since by default it is white? In which CSS attribute do I move?

<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>

html css bootstrap-4

asked by anonymous 26.11.2018 / 13:36

2 answers

3

Try this,

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

This is an example, but if possible, create a separate class to add background-color: transparent; to not affect the bootstrap native code.

26.11.2018 / 13:45

(~ ABC) + (A ~ B ~ C) + (AB ~ C) + (ABC) Repeat if again when validation fails

score 3 · Accepted Answer

Change the background-color property of the .dropdown-menu class by using the rgba notation if you want to leave semi-transparent by changing the alpha channel:

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><linkrel="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><scriptsrc="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>

If you want fully transparent , put the value transparent :

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

If you do not want to change the native class, follow the @Renan Osorio.