title: How to change text color in responsive expanded dropdown menu item in Wordpress theme The Bootstra
body: <p>I'm skinning the Wordpress theme The Bootstrap 2.0.1, which uses Twitter's bootstrap v2.3.2 and I'm trying to find out how to change the color of dropdown text items visible (which are linked) when a nav item in the collapsed navigation has been clicked open.</p>
  
  <p>I know how to change the text/background color of nav dropdown items through the variables.less file (@navbarText, @navbarLinkColor, @navbarLinkColorHover, etc)</p>
  
  <p>What is stumping me is changing the color of text items when:</p>
  
  <ul>
  <li>The window is resized so that the responsive navigation is collapsed.</li>
  <li>The navigation toggle button is clicked to reveal the previously-hidden navigation items. </li>
  <li>A menu link is clicked open to reveal the dropdown menu items in the
  responsive format.</li>
  </ul>
  
  <p>Here's what I mean using one of Bootstrap's default examples modified to illustrate the issue:</p>
  
  <pre><code>&lt;!-- NAVBAR --&gt;
  &lt;div class="navbar navbar-fixed-top"&gt;
  
  &lt;div class="navbar-inner"&gt;
  
  &lt;div class="container"&gt;
  
  &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse"&gt;
  &lt;span class="icon-bar"&gt;&lt;/span&gt;
  &lt;span class="icon-bar"&gt;&lt;/span&gt;
  &lt;span class="icon-bar"&gt;&lt;/span&gt;
  &lt;/a&gt;
  
  &lt;a class="brand" href="#"&gt;Site Title&lt;/a&gt;
  
  &lt;div class="nav-collapse collapse navbar-collapse"&gt;
  
  &lt;ul class="nav"&gt;
  
  &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  
  &lt;li class="dropdown"&gt;
  
  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Fruits &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
  
  &lt;ul class="dropdown-menu"&gt;
  
  &lt;li&gt;&lt;a href="#"&gt;Strawberries&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Bananas&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Apples&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  
  &lt;/li&gt;
  
  &lt;li class="dropdown"&gt;
  
  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Vegetables &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
  
  &lt;ul class="dropdown-menu"&gt;
  
  &lt;li&gt;&lt;a href="#"&gt;Celery&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Cabbage&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Cucumbers&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  
  &lt;/li&gt;
  
  &lt;/ul&gt;
  
  
  &lt;form class="navbar-search pull-left" action=""&gt;
  &lt;input type="text" class="search-query span2" placeholder="Search"&gt;
  &lt;/form&gt;
  
  &lt;/div&gt;&lt;!-- /.nav-collapse --&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;&lt;!-- /navbar-inner --&gt;
  
  &lt;/div&gt;&lt;!-- /navbar --&gt;
  
  &lt;!-- NAVBAR --&gt;
  </code></pre>
  
  <p>The issue is the initial color of the subcategories links (Strawberries, Bananas, Apples or Celery, Cabbage, Cucumber) when the navigation has collapsed due to the browser window being been resized and the main category (Fruits, Vegetables) has been clicked to reveal them.</p>
  
  <p>I can set the background/text color of the expanded dropdown items in the responsive mode when hovering. </p>
  
  <p>What I can't seem to change is the default light grey color the dropdown text items in the responsive mode are initially.</p>
  
  <p>The same light grey text color is used on the dropdown items in the regular responsive nav AND the inverted one. It does not change.</p>
  
  <p>I would like to be able to change that color to something else but I have yet to find a solution.</p>
  
  <p>Thanks for any help you might be able to provide.</p>