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.
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.
Share Improve this question edited Apr 19, 2017 at 4:09 confused5000 asked Mar 1, 2017 at 3:36 confused5000confused5000 591 silver badge10 bronze badges6 Answers
Reset to default 3You'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 e last, they override previous styles and bee 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./bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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 bees relatively easy. Make sure to do a little reading, and bee well acquainted with the developer tools-- particularly inspection and styles-- in your browser. Good luck!
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;
}
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./pBc3gP18DA
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
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./bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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!
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.