CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
confused5000
confused5000

Reputation: 59

How do I edit the CSS on Bootstrap's Drop Down Menu?

I've been trying to edit a Bootstrap Dropdown menu with CSS but can't get it to work. I've edited other premade Bootstrap material, but am having trouble with this one. I tried targeting various elements through CSS, but no changes showed up (besides the ".caret"). All I need is something really basic like changing the text color or the background color of the dropdown menu. All help is really appreciated.

Upvotes: 0

Views: 5571

Answers (6)

Carol Skelly
Carol Skelly

Reputation: 362450

You need to understand CSS specificity. The CSS selectors used in the bootstrap.css are more specific than .btn or .dropdown. So to override them the selectors in your CSS must be as or more specific than bootstrap.css.

.btn.btn-default {
    color: blue;
}

.dropdown-menu>li>a {
    color: pink
}

http://www.bootply.com/pBc3gP18DA

Upvotes: 2

Allen
Allen

Reputation: 2177

You can use developer tools(F12) to checkc whether your css work, and you better optimize your css style, like add class to similar element to control their style. Only use element selector may affect the same element in the HTML page.

Upvotes: 0

neophyte
neophyte

Reputation: 6626

I normally do it by assigning ID S

I haven't changed all your css just changed 2 of them--

check snippet

#dd1 {
	color: red;
}

#mybtn {
	color: red;
}

.caret {
	color: red;
}

.test {
	color: red;
}

li {
	color: blue;
}

a {
	color: blue;
}

.btn-default {
	color: blue;
}

li a {
	color: red;
}
<link rel="stylesheet" type="text/css" href="DROPDOWN.css">

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>



<body>
   <div id="dd1" class="dropdown">
   		<button id="mybtn" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
   			<span class="caret"></span>
   		</button>
   		<ul class="dropdown-menu">
			<li><a tabindex="-1" href="#">HTML</a></li>
			<li><a tabindex="-1" href="#">CSS</a></li>
			<li>
        	<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
				<ul class="dropdown-menu">
				<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
				<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
        		</ul>
			</li>
    	</ul>
  	</div>


<script>
$(document).ready(function(){
  $('.dropdown a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

</body>
</html>

One advantage of this approach is you do not override the bootstrap css. I f you need to use native css in some other portio of your page you can have without any further adjustment.

Hope this helps!

Upvotes: 0

Pratyush
Pratyush

Reputation: 535

I think you can specifically choose your element. I think this will help

  .dropdown button{
     color:blue;
  }
  .dropdown ul li a{
     color:red;
  }
  .caret{
     color:green;
  }

Upvotes: 2

Alexander Nied
Alexander Nied

Reputation: 13633

You've got a few problems here--

Firstly, you attempt to target the element of a <button> with the class selector .button -- that's not going to match anything.

Secondly, you need to understand CSS Specificity -- basically, more specific CSS rules trump less specific ones-- regardless of order. In this case, you can open the developer tools and inspect the element to see what's going on is actually that your styles are actually being declared before the Bootstrap library files-- since they come last, they override previous styles and become the styles applied.

BUT -- as you can see in my snippet, you can add a parent class to your div, and include that in the CSS targeting of your element-- voila! Two classes in a selector are more specific than one, and your CSS rule takes precedence!

.my-very-special-dropdown .btn-default {
	color: red;
}
<link rel="stylesheet" type="text/css" href="DROPDOWN.css">

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>



<body>
   <div class="dropdown my-very-special-dropdown">
   		<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
   			<span class="caret"></span>
   		</button>
   		<ul class="dropdown-menu">
			<li><a tabindex="-1" href="#">HTML</a></li>
			<li><a tabindex="-1" href="#">CSS</a></li>
			<li>
        	<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
				<ul class="dropdown-menu">
				<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
				<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
        		</ul>
			</li>
    	</ul>
  	</div>


<script>
$(document).ready(function(){
  $('.dropdown a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

</body>
</html>

CSS can feel a little arbitrary, but once you get a feel for the small set of rules dictating it it actually becomes relatively easy. Make sure to do a little reading, and become well acquainted with the developer tools-- particularly inspection and styles-- in your browser. Good luck!

Upvotes: 3

Carl Binalla
Carl Binalla

Reputation: 5401

You could check inside the bootstrap.css file, then find the dropdown styles. From there, you could see how to traverse to a specific part of the dropdown menu. You could try changing it there, copy, paste to your own style, then undo the changes to the bootstrap file

Upvotes: 1

Related Questions