Transparent dropdown with bootstrap 4

Asked

Viewed 584 times

1

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

  • Hi Slyfer, in this case you can only add one more class in the dropdown-menu, "Transparent" and make the change in style or even add in variables. in case it is done in its style and does not know how to create in the do variable . dropdown-menu.Transparent {} so it is not necessary to use ! Important if white color is in li use . dropdown-menu.Transparent . Nav-item {}

  • I get it, thank you!

2 answers

3


Change the property background-color class .dropdown-menu using the notation rgba 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>
<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>

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 what informs the response by @Renan Osorio.

  • If you want to avoid using ! Only add one more class to the dropdown menu so you don’t need to override the force, but you will for the new class.

  • It worked perfectly, thank you very much!

2

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 the background-color: Transparent; not to affect the bootstrap’s native code.

  • 1

    It worked too, thank you!!

Browser other questions tagged html css bootstrap-4

You are not signed in. Login or sign up in order to post.