CODEWITHSUNDEEP
htmlcsstwitter-bootstrapdrop-down-menu
user4826347
user4826347

Reputation: 783

Making bootstrap dropdown transparent

I need to get the bootstrap dropdown transparent. How can this be achieved. Below is the html

<div id="mydiv" class="dropdown transparentbar" style="z-index:4">
       <button class="btn btn-default dropdown-toggle" type="button" id="mybyn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
         Drop mat
         <span class="caret"></span></button>
     <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>

CSS 

     .transparentbar {
        background-repeat:no-repeat;
        cursor:pointer;
        outline:none;
        border:none;
        box-shadow:none; 
        background-image: none;

        background-color: transparent;
        background: transparent;
        border-color: transparent;

    }
Can you please help?

Upvotes: 6

Views: 25695

Answers (3)

klewis
klewis

Reputation: 8360

My experience with Bootstrap 3.3.6 and using it's LESS variable system, You can do the following to control the color hue,and level of transparency, all in one shot...

@dropdown-bg:rgba(248,248,248,.90);

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115288

It's not clear which part is supposed to be transparent so I'm going to assume it's not the button but rather the actual list that appears on click.

The background color is controlled by this:

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff; /* here */
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

So I would recommend being slightly more specific in the selector to avoid affecting any other dropdowns

#mydiv > .dropdown-menu {
    background:transparent;
}

EDIT: The button is controlled by the btn-default class

#mydiv > btn-default {
    background:transparent;
}


/* CSS used here will be applied after bootstrap.css */
body {
  background:pink !important;
}

#mydiv > .btn-default {
  background:transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>

<div id="mydiv" class="dropdown transparentbar" style="z-index:4">
  <button class="btn btn-default dropdown-toggle" type="button" id="mybyn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Drop mat
    <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul> 
</div>

Bootply Demo

Upvotes: 8

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

Have a try this way?

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<style>
  body {background-color: #999;}
  .dropdown-menu {background-color: transparent;}
</style>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Upvotes: 0

Related Questions