Tips for customizing the color scheme of Bootstrap 4 drop-down menus

Question

Tips for customizing the color scheme of Bootstrap 4 drop-down menus

I want to customize the background and font color of the dropdown navigation in Bootstrap 4.

Here is the CSS code I tried:

.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;
}

However, I encountered some issues with this approach. Below is my HTML structure:

      <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>

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Although this question has already been answered, I find it helpful and want to provide the solution that worked for me when customizing Bootsrap using Sass and NPM.

I made sure to include functions and variables above my own custom ones to avoid compilation errors. You can learn more about this approach by checking out this issue.

If you have a `_custom.scss` file structured like this:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

// Add your custom variables here

@import "~bootstrap/scss/bootstrap";

You can then refer to Bootstrap's main variables file to select which variables you wish to modify.

For instance, if you want to change the dropdown background to dark with white links, you would do the following:

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

Your updated `_custom.scss` file will look 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";

After compiling Sass, the design will reflect your changes as shown in this image: https://i.sstatic.net/el9wD.png

This method allows for customization without overwriting CSS rules unnecessarily, keeping the codebase clean.

Answer 2

Although this question has already been answered, I find it helpful and want to provide the solution that worked for me when customizing Bootsrap using Sass and NPM.

I made sure to include functions and variables above my own custom ones to avoid compilation errors. You can learn more about this approach by checking out this issue.

If you have a `_custom.scss` file structured like this:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

// Add your custom variables here

@import "~bootstrap/scss/bootstrap";

You can then refer to Bootstrap's main variables file to select which variables you wish to modify.

For instance, if you want to change the dropdown background to dark with white links, you would do the following:

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

Your updated `_custom.scss` file will look 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";

After compiling Sass, the design will reflect your changes as shown in this image: https://i.sstatic.net/el9wD.png

This method allows for customization without overwriting CSS rules unnecessarily, keeping the codebase clean.

Answer 3

Answer №2

.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>

Feast your eyes upon this code snippet – may it guide you in your endeavors.

Huzzah! It is now in perfect working order!

Answer 4

.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>

Feast your eyes upon this code snippet – may it guide you in your endeavors.

Huzzah! It is now in perfect working order!

Answer 5

Answer №3

When working with Bootstrap v4.3.1, I typically extract the CSS path from the browser's developer tools and integrate it into my Website.css file. I then customize it with additional styles to harmonize with the overall look and feel of the website I am constructing:

/*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 final outcome is expected to resemble this image:

https://i.sstatic.net/VTct5.png

Answer 6

When working with Bootstrap v4.3.1, I typically extract the CSS path from the browser's developer tools and integrate it into my Website.css file. I then customize it with additional styles to harmonize with the overall look and feel of the website I am constructing:

/*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 final outcome is expected to resemble this image:

https://i.sstatic.net/VTct5.png

Tips for customizing the color scheme of Bootstrap 4 drop-down menus

Answer №1

Answer №2

Answer №3

Similar questions

Issue with CSS: Parent container disregards child element's width limit

Simultaneous CSS3 animations on a pair of items

On a Samsung tablet with Moodle, the body background image is set to display at the top

HTML - What steps can I take to ensure my website displays appropriately on various screen sizes?

`Can you provide some tips on keeping the MetroCSS label continuously visible?`

Adjust the size of a div element dynamically to maintain the aspect ratio of a background image while keeping the

How to eliminate an underline on a hyperlink using css

The sizing of the SVG element does not dynamically adjust when the window is resized

Using an Image Fragment as a Background

Tips for preventing text from breaking onto a new line in Safari

How can you restrict the height of a scrollable column to match the size of a responsive embed column in Bootstrap 4?

Is there an HTML code block available for embedding an HTML snippet?

Checkbox in Bootstrap should be displayed before the submit button on smaller screens

Preventing unclickable Bootstrap checkboxes with identical IDs

The functionality of the Angular Bootstrap btn-radio remains unchanged despite efforts to modify its

What is the best way to ensure this is responsive with only 5 cards displayed in a row?

Accessing a hyperlink within the existing page

Non Rectangular Header with Bootstrap's Responsive Navbar

Manipulate only the elements inside the designated container

Learn the technique of looping through multiple HTML elements and wrapping them in Vue.js easily!