Umar Waleed
Umar Waleed

Reputation: 31

How to remove dropdown active color in bootstrap 3.0?

I am working on bootstrap 3.0. I have a little problem that I want to remove the active background color of nav dropdown. See the image below...

enter image description here

I have tried alot but did not find the bootstrap css which remove this grey color. Can anybody please tell me that how to remove this as I am new to bootstrap. Thanks in advance.

Updated

Please see the code below.

<nav class="navbar yamm navbar-default" role="navigation" style="height:0px;">
<div class="container-fluid">

   <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>
<a class="navbar-brand glyphicon glyphicon-home" href="#" style="left: 40px;"></a>
</div>

 <div id="navbar-collapse-2" class="collapse navbar-collapse">
<ul class="nav navbar-nav">

<li class="dropdown yamm-fw" style="border-left: 1px dotted #ccc;margin-left: -40px;"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Electronics<b class="caret"></b></a>
          <ul class="dropdown-menu" style="width:35%; left:125px; top:30px;">
            <li>
              <div class="yamm-content" style="width:200%;margin-top: 20px;">
                <div class="row">
                  <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="150x190" src="images/electronics/laptops.png"></a>
                  <p class="navbar-txt" style="margin-top: -150px;float: left;">Laptops & Computers</p>
                  <button class="btn btn-default navbar-btn">Explore</button>
                  </div>

                  <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="150x190" src="images/electronics/projectors.png"></a>                      <p class="navbar-txt" style="margin-top: -140px;float: left;">Tv & Projectors</p>
                  <button class="btn btn-default navbar-btn">Explore</button>
                  </div>

                  <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="150x190" src="images/electronics/tablets.png"></a>
                  <p class="navbar-txt" style="margin-top: -140px;float: left;">Mobiles & Tablets</p>
                  <button class="btn btn-default navbar-btn">Explore</button>
                  </div>

                </div>
              </div>
            </li>
          </ul>
        </li>
   </ul>
  </div><!-- /.navbar-collapse -->
  </div>
 </nav>

Update 2# (CSS code)

      @charset "utf-8";
/* CSS Document */

.navbar-brand {
float: left;
height: 83px;
width:125px;
padding: 15px 15px; 
font-size: 18px;
line-height: 20px;
margin-left:20px;
}


.glyphicon1 {
position: relative;
left: -5px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-left: 10px;
}


.dropdown-menu {
left: 250px;
}
.divider1{
height: 1px;
margin: 35px 0;
overflow: hidden;
background-color: #e5e5e5;

}

.dropdown-header1 {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #777;
white-space: nowrap;
margin-top: -25px;

color: #428bca;
font-size: 18px;
font-weight: bold;
}
.divider2{
height: 1px;
margin: 62px 0;
overflow: hidden;
background-color: #e5e5e5;
}


.dropdown-header2 {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #777;
white-space: nowrap;
margin-top: -52px;

color: #428bca;
font-size: 18px;
font-weight: bold;
}



.divider3{
height: 1px;
margin: 35px 0;
overflow: hidden;
background-color: #e5e5e5;
}

.dropdown-header3 {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #777;
white-space: nowrap;
margin-top: -25px;


color: #428bca;
font-size: 18px;
font-weight: bold;

}


@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
  font-family: 'Open Sans', 'sans-serif';
}
.navbar-nav>li>.dropdown-menu {
    margin-top:20px;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
}
.navbar-default .navbar-nav>li>a {
    width:200px;
    font-weight:bold;

}

.mega-dropdown {
  position: static !important;
  width:100%;
}
.mega-dropdown-menu {
    padding: 20px 0px;
    width: 70%;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.mega-dropdown-menu:before {
    content: "";
    border-bottom: 15px solid #fff;
    border-right: 17px solid transparent;
    border-left: 17px solid transparent;
    position: absolute;
    top: -15px;
    left: 285px;
    z-index: 10;
}
.mega-dropdown-menu:after {
    content: "";
    border-bottom: 17px solid #ccc;
    border-right: 19px solid transparent;
    border-left: 19px solid transparent;
    position: absolute;
    top: -17px;
    left: 283px;
    z-index: 8;
}
.mega-dropdown-menu > li > ul {
  padding: 0;
  margin: 0;
}
.mega-dropdown-menu > li > ul > li {
  list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #999;
  white-space: normal;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
  text-decoration: none;
  color: #444;
  background-color: #f5f5f5;
}
.mega-dropdown-menu .dropdown-header {
  color: #428bca;
  font-size: 18px;
  font-weight:bold;
}
.mega-dropdown-menu form {
    margin:3px 20px;
}
.mega-dropdown-menu .form-group {
    margin-bottom: 3px;
}


.custom-search-form{
    margin-top:5px;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus{
    color: #555;
    background-color: blue; //color change
}

Upvotes: 0

Views: 5043

Answers (2)

prabu padmanaban
prabu padmanaban

Reputation: 9

if bootsrap theme min included then you have to add the following css

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus{ background-image:none; color: #fff; background-color: rgba(0,0,0,0.5); }

Upvotes: 0

indubitablee
indubitablee

Reputation: 8206

EDIT: something like this? http://jsfiddle.net/swm53ran/203/

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus{
    color: #555;
    background-color: blue; //color change
}

Upvotes: 1

Related Questions