Page 1 of 1

Responsive Theme Problem on Small Screen

Posted: Mon Mar 23, 2015 10:40 pm
by calvis
How can I improve the appearance of the fly out category on the responsive theme using the CategoryMenu Control when in small screen mode?
responsive_AC.jpg

Re: Responsive Theme Problem on Small Screen

Posted: Tue Mar 24, 2015 12:51 am
by mazhar
The easiest option here is to show screen specific UI for categories in sidebar. For example for bigger screens SimpleCategoryList should be hidden while dynamic menu should be visible. For smaller screen hide the dynamic menu and show SimpleCategoryList. This can be achieved by using responsive utility classes provide with bootstrap.

Edit ConLib/SimpleCategoryList.ascx and locate following code

Code: Select all

<div class="widget simpleCategoryListWidget">
and update it like

Code: Select all

<div class="widget simpleCategoryListWidget hidden-md visible-sm visible-xs">
Next edit Conlib/CategoryMenu.ascx and locate following code

Code: Select all

<div class="widget categoryMenu">
and update it like

Code: Select all

<div class="widget categoryMenu visible-md hidden-sm">
Now save these file and refresh the browser window. For tablets and phones it will show SimpleCategoryList while for desktops it will show category menu control.

Re: Responsive Theme Problem on Small Screen

Posted: Tue Mar 24, 2015 9:39 pm
by calvis
Thanks that works perfect.