Main Menu Modification ?

Default main menu in mobile view takes 100% screen width, how can I change so the button would be just enough needed for icond and MENU word, but when menu opens it will be 100% width. Just I would like to fit for example search field next to menu, how can I do that?

Default main menu in mobile view takes 100% screen width, how can I change so the button would be just enough needed for icond and MENU word, but when menu opens it will be 100% width. Just I would like to fit for example search field next to menu, how can I do that?

Hi Darius

try to create a diferrent grid for Mobile view only (use visible-phone class for the grid) and add there search and menu blocks.. You can then hide the desktop ones via the class hidden-phone.

Start from there to see how it works first.

Fotis

PS

Correction best method is to add a new grid with 2 more grids inside (all ful width) like this, with those grid classes

ftj81c.jpg

also add this css in you visual editor

.phone-menu-grid .span8 {
    float: left;
    width: 50% !important;
}

.phone-menu-grid .phone-search {
background: #34495e none repeat scroll 0 0;
height: 46px;
padding: 5px;
}

.phone-menu-grid .ty-float-left {
float: unset;
}

You will get this result

zxuolj.jpg

Thanks for your help. I did what you instructed on demo site but menu and search is not next to each other but on top of each other. Not sure how search and menu gets next to each other on your site..

Can someone tell why this does not work on cs-cart demo site?

Can someone tell why this does not work on cs-cart demo site?

Hi Darius

pm me your url to have a look on your css and lyout. Cant realy tell with out looking

Fotis