Reputation: 31
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...
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.
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>
@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
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
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