nav backgroundcolor changes on phone

77 Views Asked by At

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

There are 2 best solutions below

1
On BEST ANSWER

Try this css change :-

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

This is because you have defined styles for larger desktops if you want to use same styles for your phone add same styles to the media-queries or just add !important to your desktop styles.

And your website doesn't looks optimized properly right now for mobile so you can disable its responsive properties if you don't want those and it is there just because of bootstrap and not because you wanted it.