title: nav backgroundcolor changes on phone
body: <p>I designed a website with a customized colored nav-bar in modx. Which works fine on a large and medium screen. But if you visit it on a phone the nav-bar comes out to be white. Therefor you can't see the title anymore. Please can you help me with this?</p>
  
  <p>It is about this website: <a href="http://www.katharinenschildow.de/" rel="nofollow">http://www.katharinenschildow.de/</a>
  Here is the css I used:</p>
  
  <pre><code>body {
      padding-top: 60px;
      padding-bottom: 40px;
      font-family: "Open Sans";
      background-color:#F3E9DA;
  }
  
  #content {
      min-height: 300px;
  }
  
  footer {
      border-top: 1px solid #efefef;
      margin-top: 100px;
      padding-top: 5px;
  }
  
  div.pagination {text-align:center;}
  
  .show-grid{
  background-color:#0f0;
  }
  
  h1{
  font-weight:200;
  }
  
  .navbar .brand{
  font-weight:400;
  padding-top:20px;
  font-size:24px;
  }
  
  .navbar .nav &gt; li &gt; a{
  color:#fff;
  padding-top:40px;
  text-shadow: none;
  }
  
  #content-left img{
  padding:10px;
  padding-top:50px;
  padding-left:0px;
  }
  
  .navbar-inner{
  background-image: linear-gradient(to bottom,#ADC9C7,#588683);
  }
  
  .container#main{
  background-color:#F3E9DA;
  
  }
  
  .navbar .brand {
  color:#fff !important;
  text-shadow: none;
  }
  
  #content-right {
  background-color:#fff;
  margin-top:50px;
  }
  
  .main#content{
  padding:40px;
  padding-top:10px;
  }
  
  .brand #subline{
  font-size:14px;
  }
  
  li.dropdown ul.dropdown-menu li a{
  color: black;
  }
  
  li.dropdown ul.dropdown-menu li a:hover{
  color: white;
  }
  
  .navbar  .nav-collapse.in {
      height: auto !important;
  }
  </code></pre>