Hello,

Please add this code into your custom css box in General Options:

@media (max-width: 1050px){
header#header #navigation {display: none !important;}
.mobile_small_menu {display: block !important;}
#logo { margin-left: 40% !important;}
}

Let us know.

Best regards!

Hello,

This is a code generated from the default online demo. If you want a more precise code, then send us a link of your site. So we can check it up.

Best regards!

Hello,

I tried adding this code via inspect element:

@media (max-width: 1055px){
.mobile_small_menu {
    display: block !important;
}
#navigation {
    display: none !important;
}
#logo {
    float: right !important;
}}

And this is the result: https://postimg.org/image/dev31vmdx/
Can you please try again? make sure to not have any errors in previous code that could interfere with the right execution of this block.
Let us know.

Best regards!

Hello,

Yes, sure. Inside the @media (max-width: 1055px) rule, add this code as well:

header#header {
    background-color: white !important;
}

So the result code with be:

@media (max-width: 1055px){
.mobile_small_menu {
    display: block !important;
}
#navigation {
    display: none !important;
}
#logo {
    float: right !important;
}
header#header {
    background-color: white !important;
}
}

Best regards!

Hello,

I checked your site and the header is already white in ipad mode. I suggest you clear cache first and then refresh pages.

Best regards!