Hello,

I added this code into your custom css box:

#logo img {  margin-top: 60px !important;}
nav {
    height: 100%;
    padding-top: 0px !important;
}
.header_8 nav .menu>li>a {
    margin-top: -30px !important;
    height: 100px !important;
}
.header_tools {
    padding-top: 24px !important;
}

@media (max-width: 979px){
#logo img {  top: 20% !important;}
.header_tools {  height: 80% !important;}
.header_tools {
    padding-top: 0 !important;
}
}
@media (max-width: 1024px){
header#header #navigation {  margin-top: -80px !important;}
.header_tools {  height: 55% !important;}
#logo {  margin-top: -60px !important;}
.header_tools .vert_mid > a:last-child { margin-top: -36px;}
}
@media (max-width: 480px){
#logo img {
    max-height: 85px !Important;
    margin-top: -14px !Important;
    margin-right: 55px !Important;
}}

This is the result: mobile screenshot; ipad; ipad landscape.
Let us know.

Best regards!

Hello,

I can see the mobile menu icon and drop-down are displaying as they should. Please see screenshot. Did you manage to fix your issue?
Let us know.

Best regards!

Hello,

Did you set up slider to hide in mobile? Please check it at your page’s General Settings > Slider Options > Remove Sliders from Mobile Phone View.

The navigation does not disappear. In mobile and ipad, the normal menu is hidden and the mobile menu is displayed. Don’t you have the three bars menu icon showed?
Can you please fill in the necessary information on your extra information fields of your profile data? So we can give it a closer look.

Read this article for more information.

Best regards!

I had same issue with slider for

<span style=”color: #4b4d4d; font-family: Raleway; font-size: 14px;”>3 – The text size appears perfectly on desktop version, but appears way too small or way too big on mobile. And with the slider becoming shorter as we scroll down, we lose text of the slider that’s hidden under the menu bar…</span>

And this helped me.

@media (max-width: 480px){
.codeless-slider-container { height:430px!important;}
.codeless_slider_swiper { min-height: 430px !important;}
.codeless_slider .swiper-slide { min-height: 430px !important;}
.codeless_slider_wrapper { min-height: 430px !important;} }

By adding one more class .codeless-slider-container { height:430px!important;} 

Hope this helps.

Hello,

Please add this code into your custom css box:

@media (max-width: 480px){
#logo img {
    height: 75px !important;
    top: 57% !important;
}}

This is the result screenshot.
The mobile menu bars are already blue. Did you manage to change it’s color? Let us know.

Best regards!

Hello,

The landscape is a different layout and it has a different screen size. To edit this, please add this code:

@media ((max-width: 979px)) {
#logo img { width: 100%;}
.mobile_small_menu { margin-left: -41px;}
}

Let me know if you need further help.

Best regards!

Hello,

This requires custom css. If you want a different logo in mobile and only on certain pages, then the custom css code would need to be added only to those page’s custom css box (the gear icon in top-right corner). Try this code:

@media (max-width:480px){
.header_wrapper #logo {
 content: url("https://codeless.co/specular/default/wp-content/uploads/2014/10/logo.png");
}}

Please fill in the necessary information on your extra information fields of your profile data. So we can give it a closer look to mobile menu.

Read this article for more information.

Best regards!