responsive top menu

Hi,

You can change header style to “Blog style – full text logo + menu” and I think that there wont be issues on moblie view. Any if you want to use Style 3 you can use this custom css:

To hide the main menu and place the search button on top for mobile view: http://screencast.com/t/Q2PImmCmYDWG

@media (max-width: 767px) {
#td-top-menu .sf-menu {
display: none;
}
.blog-stack #td-top-search{
right: -50px;
top: -75px;
}
.header-search-wrap .dropdown-menu {
left: -56px!important;
}
}

For tablets please use this custom css in Theme Panel > Custom Css: http://screencast.com/t/vMf2QV8vpxMx

@media (max-width: 1018px) and (min-width: 768px){
.blog-stack .sf-menu > li > a{
padding: 0px 5px 0px 5px;
}
.blog-stack .sf-menu a.sf-with-ul {
padding-right: 25px;
}
.blog-stack .sf-menu > li > a{
font-size: 12px;
}
}

Hope this helps!

Thanks!