Tips for adjusting the background and text color of Bootstrap dropdowns using CSS

I've been experimenting with different approaches to modify the background color and text color of the dropdown menu (dropdown-menu & dropdown-item), but I haven't had any success so far. Currently, the dropdown has a very light grey background color with a medium light grey hover effect on each item, along with yellow text. The lack of contrast between these colors is bothering me, and I need to change them.

/* navbar */

.navbar-nav {
  font-weight: bold !important;
}


/* Navbar Background Color */

.nav-item a,
.nav-item a:link,
.nav-item a:visited {
  color: var(--bodyPage) !important;
}

/* Navigation Item Font Color */

.nav-item a:hover,
.nav-item a:focus {
  color: var(--linkHover) !important;
}

/* Hover Font Color for Navigation Items */

.active a,
.nav-item .active a:link,
.active a:visited {
  color: var(--navActive) !important;
}

/* Active Navigation Item Font Color */

.active a:hover,
.active a:focus {
  color: var(--linkHover) !important;
}

/* Hover Font Color for Active Nav Items */

/* Links */

a,
a:link,
a:visited {
  color: var(--link);
}

a:hover,
a:focus {
  color: var(--linkHover);
}

.site-footer a,
.site-footer a:link,
.site-footer a:visited {
  color: var(--link);
}

/* Footer Link Color */

.site-footer a:hover,
.site-footer a:focus {
  color: var(--linkHover);
}

/* Hover Link Color in Footer */

.site-page a,
.site-page a:link,
.site-page a:visited {
  color: var(--link);
}

/* Page Body Link Color */

.site-page a:hover,
.site-page a:focus {
  color: var(--linkHover);
}

/* Hover Link Color in Page Body */

.banner a,
.banner a:link,
.banner a:visited {
  color: var(--link);
}

/* Banner Link Color */

.banner a:hover,
.banner a:focus {
  color: var(--linkHover);
}

/* Hover Link Color in Banner */

.no-banner a,
.no-banner a:link,
.no-banner a:visited {
  color: var(--link);
}

/* No Banner Link Color */

.no-banner a:hover,
.no-banner a:focus {
  color: var(--linkHover);
}

/* Hover Link Color in No Banner */

.navbar-default .navbar-toggle {
  background-color: red !important;
}

@media (max-width:992px) {
  .navbar-nav {
    background-color: black !important;
    padding: 8px !important;
  }
}

/* Dropdown Menu */

.dropdown-menu {
  background-color: rgb(99, 97, 97) !important;
}

.dropdown-item a:hover {
  background-color: rgb(0, 0, 0) !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="21434e4e55525553405161150f110f11">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98e8f7e8e8fdeab6f2ebd8a9b6a9aab6a1">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aac8c5c5ded9ded8cbdaea9e849a849a">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
  <div class="site-wrap" id="home-section">
    <header class="container-fluid sticky site-header" id="headerSite">
      <div class="container">
        <nav class="navbar navbar-expand-md navbar-light">
          <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
            <div class="navbar-nav mr-auto">
              <li class="nav-item"><a href="/dashboard" class="nav-link">Dashboard</a></li>
              <div class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle" id="dropdownNav" data-bs-toggle="dropdown">database</a>
                <div class="dropdown-menu" aria-labelledby="dropdownNav">
                  <a href="..." class="dropdown-item">table1</a>
                  <a href="..." class="dropdown-item">table2</a>
                  <a href="..." class="dropdown-item">table3</a>
                </div>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </header>

htmlcssbootstrap-4navbar

Answer №1

  1. Include a personalized css file (like style.css) and link it after your bootstrap css reference (for example, 

    <link rel="stylesheet" href="path-to-your-css-file/style.css">
    )

  2. Add a new custom class to the elements you want to change and style that class to your liking.

For instance: 

<a href="#" class="nav-link dropdown-toggle custom-dropdown" id="dropdownNav" data-bs-toggle="dropdown">database</a>

  1. You can apply the same process for dropdown-items as well.

Answer №2

Check out the solution below... The changes have been successfully applied. Please review my explanation in response to the code comment. Copy and paste the following code snippet into your CSS file or within the style tags to modify the dropdown:

.dropdown {
            background-color: aqua !important;
            /* Modify dropdown background color */
        }

        .dropdown a {
            color: whitesmoke !important;
            /* Adjust dropdown text color */
        }

        .dropdown-menu {
            background-color: brown !important;
/* Change dropdown menu background color */
        }

        a.dropdown-item {
            color: blueviolet !important;
/* Set dropdown menu text color */
        }

        a.dropdown-item:hover {
            background-color: chocolate;
            color: seagreen !important;
/* Define hover effects for dropdown menu */
        }
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7858888939493958697a7d2c9d4c9d7ca868b97888ecd">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b2924243f383f392a3b0b7e6578657b662a273b232a78">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

    <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Dropdown
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li>
                                <hr class="dropdown-divider">
                             </li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled">Disabled</a>
                    </li>
                </ul>
                <form class="d-flex" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>

Answer №3

It appears that there are some HTML problems and I couldn't see the dropdown menu in your example. The solution provided here seems to work for me as I can observe the color change in the dropdown menu. Although the exact color scheme you desire is unclear, this code snippet may help you get closer.

/* CSS Styles for Navbar */

.navbar-nav {
  font-weight: bold !important;
}

.nav-item a,
.nav-item a:link,
.nav-item a:visited {
  color: var(--bodyPage) !important; /* Navbar background color */
}

.nav-item a:hover,
.nav-item a:focus {
  color: var(--linkHover) !important; /* Hover font color for navbar items */
}

.active a,
.nav-item .active a:link,
.active a:visited {
  color: var(--navActive) !important; /* Font color for active navbar item */
}

.active a:hover,
.active a:focus {
  color: var(--linkHover) !important; /* Font color on hover for active navbar item */
}

a,
a:link,
a:visited {
  color: var(--link); /* Link color */
}

a:hover,
a:focus {
  color: var(--linkHover); /* Link hover color */
}

.site-footer a,
.site-footer a:link,
.site-footer a:visited {
  color: var(--link); /* Footer link color */
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--linkHover); /* Footer link hover color */
}

.site-page a,
.site-page a:link,
.site-page a:visited {
  color: var(--link); /* Page body link color */
}

.site-page a:hover,
.site-page a:focus {
  color: var(--linkHover); /* Page body link hover color */
}

.banner a,
.banner a:link,
.banner a:visited {
  color: var(--link); /* Banner link color */
}

.banner a:hover,
.banner a:focus {
  color: var(--linkHover); /* Banner link hover color */
}

.no-banner a,
.no-banner a:link,
.no-banner a:visited {
  color: var(--link); /* No banner link color */
}

.no-banner a:hover,
.no-banner a:focus {
  color: var(--linkHover); /* No banner link hover color */
}

.navbar-default .navbar-toggle {
  background-color: red !important; /* Toggle button background color */
}

@media (max-width:992px) {
  .navbar-nav {
    background-color: black !important; /* Responsive navbar background color */
    padding: 8px !important; /* Padding for responsive navbar */
  }
}

.dropdown-menu {
  background-color: rgb(99, 97, 97) !important; /* Background color for dropdown menu */
}

.dropdown-item a:hover {
  background-color: rgb(0, 0, 0) !important; /* Hover background color for dropdown items */
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<header class="site-wrap" id="home-section">
  <header class="container-fluid sticky site-header" id="headerSite">
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a href="/dashboard" class="nav-link">Dashboard</a></li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                database
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">table1</a>
                <a class="dropdown-item" href="#">table2</a>
                <a class="dropdown-item" href="#">table3</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </header>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for keeping your button fixed in place

I am encountering an issue where my button moves below the select dropdown list when I try to make a selection. Is there a way to keep the button in place even when the dropdown list from the select box is visible? For reference, here is the current outp ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Designs fail to load in Angular 7 when using bootstrap framework

Why is Bootstrap failing to load the design correctly in my Angular 7 project? I am using Visual Studio Code and recently added a new component called login. Following that, I ran the following commands: npm install bootstrap npm install popper.js npm in ...

angularbootstrap-4

Obtaining a binary value in the switch component of materialize framework with Typescript

Is there a way in Typescript to assign a value of 1 when a checkbox is checked and 0 otherwise? I am working on a project that uses the materialize framework. Below is the code snippet in question: <div class='switch'> <label&g ...

htmlangulartypescriptmaterializeswitching

How do I go about aligning the first row to the center vertically?

When I use the align-items-center class in the row section, it just doesn't seem to work as expected: <div class="container"> <div class="row align-items-center"> <div class="col-12 bg-warning"> hello ...

htmlcssbootstrap-4

Not including traffic from IE 6/7

Is there a simple way to show a different page to users on IE6/7 when they visit a website? For example, can I redirect users from example.com to example.com/ie7? Unfortunately, IE7 is not compatible with the website I created, so I want to display a min ...

htmlcssinternet-explorer

What is the method in JavaScript to retrieve the current date with millisecond precision?

Is there a way in JavaScript to obtain the current date and time down to milliseconds? When using the new Date() method, it returns the time up to seconds like this: console.log(new Date()) LOGS - Thu Sep 07 2017 14:47:37 GMT+0530 (India Standard Time) W ...

javascriptjqueryhtmlangulardate

The boundary extends fully to the right

Recently, I created a calculator to convert kilograms to pounds and encountered an issue when trying to add a border to a p element. The problem was that the border extended all the way to the right side of the page. Here is the corresponding HTML code: &l ...

htmlcssborder

Pressing the reset button on a basic calculator

I am experiencing an issue with my calculator. It works fine initially, but after using the reset button, it stops functioning properly. Currently, I only have the multiplication set up as I debug this problem. I am new to JavaScript and would appreciate a ...

javascriptjqueryhtmlcss

How can the caption be aligned to the right of the image within a Bootstrap thumbnail in a precise manner, while also ensuring the button is positioned at the bottom of the caption?

Greetings! I am in the process of developing a website using bootstrap v3.3.2. My first query revolves around utilizing the grid system to correctly position the caption on the right side of the thumbnail, as illustrated below: <div class="container"& ...

htmlcsstwitter-bootstrapthumbnailscaption

Adjust the height of the element to match the parent's height

I am working on a design with a structure like this: <section> <h3>Title:</h3> <p>Content that may span multiple lines.</p> </section> section { background: #5E5E5E; overflow:hidden; } h3 { backgro ...

htmlcssheight

What is the best way to arrange the elements vertically within a flex container?

In my current code snippet, I have the following setup: <section class="body1"> <h1 class="text1">Tours around the world</h1> <h3 class="text1">Great experiences</h3> <form action="/respuestaUsuario/"> ...

htmlcssflexbox

Is it possible for me to use @import to selectively choose what I need and disregard the rest?

If I am utilizing SASS and wish to incorporate a significant portion of another existing stylesheet, whether it is in SASS or CSS format, I have the option to import that particular sheet using @import, then employ @extend to apply some of its rules. Is ...

csssass

What CSS property can be used to make short words wrap to the next line?

Is it possible to automatically identify if a line of text ends with a short word and then move it to the next line, so that the text flows smoothly? This would ensure a more organized layout. For instance, I envision the following text: Cascading Style ...

htmlcss

Design a custom scrolling navigation bar for enhanced user experience

Struggling with web design as I develop a site in ASP.NET. I have a database full of courses, each with numerous modules. The challenge is creating a navigation bar that dynamically adjusts to accommodate the varying number of modules per course without o ...

jqueryhtmlcssangularjs

Caution: The presence of <li> within another <li> is not permitted in validateDOMNesting()

I am facing a challenging background error warning that I am struggling to solve. As a beginner, I understand the need to change li, but I'm not sure where to begin. Can someone please assist me with this error warning: next-dev.js?3515:20 Warning: va ...

cssnext.js

Steps for aligning a custom SVG icon in the middle of a Material-UI IconButton

Looking to create an icon button that resembles this design: https://i.sstatic.net/QCyZO.png My current progress is as follows: https://i.sstatic.net/NXfm0.png Below is the code snippet I have been working on: import { SvgIcon, IconButton } from '@m ...

cssreactjssvgmaterial-uiicons

Tips for adding an image to HTML after clicking on a div element

Is there a way to prompt users to upload an image by clicking on a <div> that contains an <img>? The current code I have is: <div class="container"> <img src="..." alt="Profile image" class="profileImg"> ...

html

Utilizing DOMStringMap data to populate CSS URLs

I am attempting to create a universal CSS modification for a webpage element that resembles: <button data-action="link" class="cardImageContainer coveredImage cardContent itemAction lazy lazy-image-fadein-fast" data-blurhash="lo ...

javascripthtmlcssdomjellyfin

Maintain the layout of HTML page while reducing the window size

My webpage is experiencing an issue. When I resize the window, the placement of all elements becomes misaligned and the layout gets distorted. ...

htmlcsswindowpositionminimized

Interactive button with jQuery that toggles between clicked and unclicked states, automatically reverting to unclicked when clicked elsewhere on the page

I am trying to create a button that changes its appearance when clicked, and returns to its normal state if clicked again or if the user clicks outside of it. Here is the JavaScript code I have written: if($('#taskbar-start').hasClass('ta ...

javascriptjqueryhtml