css - 导航背景颜色在手机上发生变化

Question

我在 modx 中设计了一个带有自定义彩色导航栏的网站。在大屏幕和中屏幕上效果很好。但是如果你在手机上访问它，导航栏就会变成白色。因此，您再也看不到标题了。你能帮我解决这个问题吗？

关于这个网站:http://www.katharinenschildow.de/ 这是我使用的 CSS:

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;
}

Answer 1

试试这个 css 更改:-

.navbar-inner{
background-image: linear-gradient(to bottom,#ADC9C7,#588683);
background-image:-webkit-gradient(linear, to bottom,#ADC9C7,#588683);
}