Customize mobile header and menu?

Hi,
You can tweak it with custom CSS:
Place the code in the theme panel->custom CSS box.

@media (max-width: 767px){
.td-main-page-wrap {
padding-top: 30px!important;
}
.td-banner-wrap-full{
background-color: #222;}
}

Thanks.

Hi,

The code i provided removes the bottom border and changes the background color for the ad container.
The theme was not built to support big logos to cover the containers like that. The recommended logo dimensions are these: http://screencast.com/t/wRIpx7CxBGJV. In order to make the logo fit on mobile phone you can make a smaller logo and add it as a background image to the container in the mobile version.
You will need a bit of css knowledge to get it done.
As an example:

@media (max-width: 767px){
.td-header-style-10 .td-header-sp-logo {
background-image: url("your image url");
}
.td-header-style-10 .td-header-sp-logo img{
display:none
}}

It will need further customization to fit properly though

Thanks

Hello,

Unfortunately there is no option to change the header style on a different viewport.

You can use this custom CSS to display the small logo on the mobile version of your site:
@media (max-width: 767px){
.td-header-style-10 .td-main-menu-logo {
display: block!important;}}

Now your logo should show up as expected.
Thank you.

Hi,

At the moment these are the only options for the mobile menu. In a future update we hope to implement a number of options for the mobile version. What you can do is make the top-menu appear above the main menu, but again it will need custom work to display properly. Not all options from the top menu will fit.
As an example:
http://screencast.com/t/PL9o8rRCN6N6
code:
@media (max-width: 767px){
.td-header-top-menu-full {
display: block;}
.td-header-sp-top-menu{
display:block!important;
}

You can then hide elements you do not want with the ‘display:none’ property.

Thanks.