14

I am trying to change both the background, and font color of the bootstrap 4 dropdown navigation.

I tried to use 

.nav.nav-tabs > li.dropdown.active.open > a, .nav.nav-tabs > li.dropdown.active.open > ul.dropdown-menu a:hover, .nav.nav-tabs > li.dropdown.open > a, .nav.nav-tabs > li.dropdown.open > ul.dropdown-menu a:hover { color: #fff; background-color: #b91773; border-color: #fff; }

But this wasn't working too well for me. Here is my HTML:

 <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li>
Improve this question

3 Answers 3

Reset to default
23

I know this is already answered, but since I'm bookmarking it, I want to give the solution that worked for me when theming Bootsrap using Sass and NPM.

Note that I include functions and variables above my custom ones because I need to access them otherwise the compilation will fail. Read more about it on this issue.

Suppose you have your _custom.scss like this:

@import "~bootstrap/scss/functions"; @import "~bootstrap/scss/variables"; // Add your custom variables here @import "~bootstrap/scss/bootstrap";

Then you can go to Bootstrap's main variables file and copy over the ones you want to overwrite.

For example, if I want my dropdown background to be dark with white links I'd do it like:

$dropdown-bg: $dark; $dropdown-link-color: $light;

And my _custom.scss file after the changes would like like this:

@import "~bootstrap/scss/functions"; @import "~bootstrap/scss/variables"; // Add your custom variables here $dropdown-bg: $dark; $dropdown-link-color: $light; @import "~bootstrap/scss/bootstrap";

And this is an image of what it looks like after compiling Sass:

Bootstrap's dropdown with dark background

This way I don't overwrite CSS rules avoiding unnecessary clutter.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Great answer. I additionally edited $dropdown-link-active-bg and $dropdown-link-hover-bg.
19 

.dropdown {list-style: none; background: green; padding: 10px; display: inline-block;} .dropdown .nav-link {color:#fff; text-decoration: none;} .dropdown .dropdown-menu a{color: #000; text-decoration: none;} .dropdown .btn {background: green; color:#fff;} .dropdown .btn:hover {background: cyan; color:#000;} .dropdown .btn:active {background: cyan; color:#000;} .dropdown .btn:focus {background: cyan; color:#000;} .dropdown-menu .dropdown-item {display: inline-block; width: 100%; padding: 10px 5px;} .container .dropdown .dropdown-menu a:hover { color: #fff; background-color: #b91773; border-color: #fff; }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </div> </body> </html>

Here is a some code, hope it will helps you.

Edited

It is working fine now

Improve this answer

2 Comments

Hey man, I'm actually using bootstrap 4, I should of clarified that. This is great, except it does not work for version 4
@Temple Please check it is working fine now with bootstrap 4, you should properly override the css else it will not work. and have you used tether.js ?
1

In Bootstrap v4.3.1 I simply copy the CSS path from the browser developer tools, and add it to my Website.css, and add to it some styles to much the look and feel of the website I am building:

/*drop-down override*/ div.btn-group.show div.dropdown-menu.show { background-color: #4b4b4b; } div.btn-group.show div.dropdown-menu.show button.dropdown-item { color: #e1e1e1; } div.btn-group.show div.dropdown-menu.show div.dropdown-divider { border-top: 1px solid rgba(50, 50, 50, 0.9); } div.btn-group.show div.dropdown-menu.show button.dropdown-item:hover, div.btn-group.show div.dropdown-menu.show button.dropdown-item:focus { background-color: #1e1e1e; color: #f0f0f0; }

The result should look like this:

Output dropdown menu

Improve this answer

3 Comments

I'm using exactly Bootstrap version 4.3.1 and this isn't working for me for nav item dropdowns. But thanks for sharing :-)
You may need to remove div. or replace div. with a. or ul. depending how you built the menu.
Because of the changes in the new Bootstrap version 4, I just wanted to draw attention to that all what you need to do is choosing the active selector, with fully qualified order like in the answer, it not a problem of div or what element you use, it is just knowing the qualified selector.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.