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

Answer 2

这是因为如果您想为手机使用相同的样式添加相同的样式到媒体查询，或者只是添加！重要的桌面样式，您已经为较大的桌面定义了样式。

现在你的网站对于移动设备看起来没有正确优化，所以你可以禁用它的响应属性，如果你不想要那些它只是因为引导而不是因为你想要它。

nav backgroundcolor在手机上的变化

2 个答案: