Change color of font in dropdown of bootstrap navbar when collapsed

Question

I have been trying to change the color of the font shown in the image so that it is plainly visible.

this is a basic bootstrap 3 navbar. here is the html code

<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="collapse navbar-collapse">
                <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>

And this is what i have tried to do to change the font color

@media (max-width: 767) {
  .dropdown-menu > li > a{
    color: #ffffff !important;
  }
  .navbar-custom .container .container-fluid .navbar-nav .open .dropdown-menu > li > a  {
    color: #ffffff !important;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a,
  .navbar-custom .navbar-nav .open .dropdown-menu {
    color: #ffffff !important;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #b0cb36;
    background-color: transparent;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #b0cb36;
    background-color: #003748;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ffffff;
    background-color: transparent;
  }
}

Nothing I have tried has changed that dark font to be a lighter one

Answer 1

Add the class "text-danger" or whatever color you prefer. I didn't try it but I hope it works! If it does not work then add class to each li.

<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="collapse navbar-collapse">
                <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 text-danger">
                            <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>

Answer 2

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>