Bootstrap Dropdown Menu Text Color

Bootstrap dropdown menu text color

You should be able to use this CSS..

  /*-- change navbar dropdown color --*/
  .navbar-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav .open .dropdown-menu {
    background-color: #3344ff;
    color:#ffffff;
  }

Demo: http://www.bootply.com/113750

Changing the text color of a Bootstrap dropdown item

The semi-colon goes after the !important, otherwise it won't be included in that property (CSS doesn't deal with white space/returns).

Correct use:

.dropdown-menu a{
    color: #FFFFFF !important;
}

http://css-tricks.com/when-using-important-is-the-right-choice/

Change text color of a dropdown menu in bootstrap-vue

You can use deep selector

::v-deep .nav-link {
   color: #000!important;
}

more restriction on dropdown only

::v-deep .dropdown .nav-link {
   color: #000!important;
}

How to Change the Background Color and Text Color of Bootstrap Navbar Dropdown-menu List Items After Menu Collapses

I suggest to use media queries and add the classes you want to tweak.
For example:

/* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
  .dropdown-menu>li>a {
    background-color: #fff;
  }
    }

For Bootstrap 3 default media queries you may found it here

Bootstrap Dropdown Hover Text Color

You can try including the !important to the style:

color: white !important;

this is done to override the default styles bootstrap establishes for the elements.

Change color of font in dropdown of bootstrap navbar when collapsed

The main problem us with your media query - you need to include the unit e.g. @media (max-width: 767px)

Once that is corrected, you just need to use a more specific selector to override the Bootstrap CSS, rather than using !important. The selectors you need to override are:

• .dropdown-menu>li>a
• .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover

Adding the .navbar-nav class is enough, e.g. .navbar-nav .dropdown-menu>li>a - you don't want to make it too specific as it makes it more difficult if you wish to override it again in future.

Working example (except I've removed the collapse class so we can see it in the snippet)

@media (max-width: 767px) {
  .navbar-nav .dropdown-menu>li>a {
    color: red;
  }
  .navbar-nav .dropdown-menu>li>a:hover,
  .navbar-nav .dropdown-menu>li>a:focus {
    color: lime;
    background-color: transparent;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar navbar-custom">
  <div class="container">
    <div class="container-fluid">
      <div class="navbar-header">
        <div class="navbar-spacer"></div>
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
      </div>
      <div id="navbar" class="">
        <ul class="nav navbar-nav">
          <li class="first"><a href="/">Home</a></li>
          <li class="dropdown ">
            <a href="link1.htm" class="dropdown-toggle" data-toggle="dropdown">Item 1<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="link1-1.htm">Item 1-1</a></li>
              <li><a href="link1-2.htm">Item 1-2</a></li>
              <li><a href="link1-3.htm">Item 1-3</a></li>
            </ul>
          </li>
          <li><a href="link2.htm">Item 2</a></li>
          <li><a href="link3.htm">Item 3</a></li>
          <li><a href="link4.htm">Item 4</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Bootstrap dropdown: cannot change the color of anchor link and it's item text color

It is because the class .text-muted has !important which will override your styles. To override this again you have to add !important again in your styles. Here's the code

.nav-menu, .nav-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
  padding-bottom: 0px;
}

.nav-menu > ul > li {
  position: relative;
  white-space: nowrap;
  float: left;
}

.nav-menu a {
  display: block;
  position: relative;
  color: #fff;
  padding: 10px 15px;
  transition: 0.3s;
  font-size: 15px;
  font-family: "Open Sans", sans-serif;
}

.nav-menu a:hover{
  color: #4e4039;
  text-decoration: none;
}
.nav-menu .active{
  color: #fff;
  text-decoration: none;
}
.nav-menu li:hover{
  color: #4e4039;
  text-decoration: none;
}
.nav-item > li{
  color: #fff !important;
  text-decoration: none;
}

.nav-menu .drop-down ul {
  display: block;
  position: absolute;
  left: 0;
  top: calc(100% - 30px);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  padding: 10px 0;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: ease all 0.3s;
}

.nav-menu .drop-down:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.nav-menu .drop-down li {
  min-width: 180px;
  position: relative;
}

.nav-menu .drop-down ul a {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  color: #3c1300;
}

.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
  color: #990000;
}

.nav-menu .drop-down > a:after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 5px;
}

.nav-menu .drop-down .drop-down ul {
  top: 0;
  left: calc(100% - 30px);
}

.nav-menu .drop-down .drop-down:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
}

.nav-menu .drop-down .drop-down > a {
  padding-right: 35px;
}

.nav-menu .drop-down .drop-down > a:after {
  content: "\eaa0";
  font-family: IcoFont;
  position: absolute;
  right: 15px;
}

.nav-menu a.text-muted {
  color: #fff!important;
}

nav.nav-menu {background: red;}
nav.nav-menu ul::after {content: ''; clear: both; display: table;}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="nav-menu d-none d-lg-block">
  <ul>
    <li class="active"><a href="#header">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#Locate" target="_blank">Locate</a></li>
    <li><a href="#search">Search </a></li>
    <li><a href="#List">List</a></li>
    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark pro-pic" 
    href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
    <div class="dropdown-menu dropdown-menu-right user-dd animated">

     <div class="dropdown-divider"></div>
      <a class="dropdown-item" data-toggle="modal" data-placement="top"  href="#account_edit_script">Account Settings</a>
     <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="logout.php">Logout</a>

     </div>
    </li>
  </ul>
</nav>

<div class="form-group">
           <label class="d-flex justify-content-center"><strong>Update Information</strong></label>
                 <label>Fullname</label>
                 <input type="text" name="user_fullname" value="<?php echo $row['user_fullname']; ?>" class="form-control" placeholder="" required>
                    </div>
           <div class="form-group">
                 <label>Email</label>
                 <input type="email" name="user_email" value="<?php echo $row['user_email']; ?>" class="form-control" placeholder="" required>
                 </div>
                 <div class="form-group">
                 <label>Password</label>
                 <input type="password" name="password" class="form-control" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
            title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
            placeholder="Enter New/Old Password" required> 

---

Related Topics