title: Bootstrap Mobile List Menu change
body: <p>I'm new to Bootstrap, I have change my navigation bar to my wanted style using a custom CSS. Where I am having an issue is that when Bootstrap shrinks into mobile version my dropdown > list > links do not maintain the colours which are displayed on large screens.</p>
  
  <p>I can't figure out the css class to specify to change the dropdown list link colours. My goal is to have the text white at all times which works apart from when the page shrinks into mobile.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    background: #168CCC;
  }
  /* navbar*/
  .navbar-default {
    background-color: #279DDD;
    border: 0px;
  }
  /* title */
  .navbar-default .navbar-brand {
    color: #fefefe;
  }
  /* controls brand colour when hovered over or focused */
  .navbar-default .navbar-brand:hover,
  .navbar-default .navbar-brand:focus{
    color: #fefefe;
  }
  /* navbar-deafult .navbar-nav link colour also when clicked */
  .navbar-default .navbar-nav li a,
  .navbar-default .navbar-nav &gt; .active &gt; a,
  .navbar-default .navbar-nav &gt; .active &gt; a:focus {
      color: #fefefe;
      background-color: #279DDD;
  }
  /* navbar-deafult .navbar-nav background and text link colour when hovered */
  .navbar-default .navbar-nav &gt; .active &gt; a:hover{
    background: #0CA6F9;
    color: #fefefe;
  }
  /* dropdown menu arrow aka caret */
  .navbar-default .navbar-nav .dropdown a .caret {
      border-top-color: #fefefe;
  }
  /* down arrow on dropdown when interacted with */
  .navbar-default .navbar-nav &gt; .dropdown &gt; a:focus .caret {
      border-top-color: #fefefe;
      border-bottom-color: #fefefe;
  }
  /* navbar-deafult .navbar-nav .dropdown link colour when hovered and focus */
  .navbar-default .navbar-nav &gt; .dropdown &gt; a:hover,
  .navbar-default .navbar-nav &gt; .dropdown &gt; a:focus{
    background: #0CA6F9;
    color: #fefefe;
  }
  /* dropdown arrow when active, hovered or focus */
  .navbar-default .navbar-nav &gt; .open &gt; a .caret,
  .navbar-default .navbar-nav &gt; .open &gt; a:hover .caret,
  .navbar-default .navbar-nav &gt; .open &gt; a:focus .caret {
      border-top-color: #fefefe;
      border-bottom-color: #fefefe;
  }
  /* dropdown background */
  .navbar-default .navbar-nav .open .dropdown-menu li a,
  .navbar-default .navbar-nav .open .dropdown-menu{
    background: #279DDD;
  }
  /* navbar-default .navbar-nav .open .dropdown-menu links background colour when hovered */
  .navbar-default .navbar-nav .open .dropdown-menu li a:hover {
    background: #168CCC;
  }
  /* mobile version nav menu icon border */
  .navbar-default .navbar-toggle {
      border-color: #fefefe;
  }
  /* mobile version nav menu icon background when interacted with */
  .navbar-default .navbar-toggle:hover,
  .navbar-default .navbar-toggle:focus {
      background-color: #279DDD;
  }
  /* mobile version nav menu icon colour */
  .navbar-default .navbar-toggle .icon-bar {
      background-color: #fefefe;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
   &lt;head&gt;
      &lt;!--links css file--&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
      &lt;!--end--&gt;
      &lt;!--Links bootstrap min javascript file--&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;!--end--&gt;
    &lt;/head&gt;
  &lt;body&gt;
      &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&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;/button&gt;
            &lt;a class="navbar-brand" href="#"&gt;test site&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
            &lt;ul class="nav navbar-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 class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Page 1 &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Page 1-1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Page 1-2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Page 1-3&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; Sign Up&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-log-in"&gt;&lt;/span&gt; Login&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>