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?
It is about this website: http://www.katharinenschildow.de/ Here is the css I used:
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 > li > 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;
}
Try this css change :-