Responsive Theme Problem on Small Screen

[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

[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.

[calvis]

Thanks that works perfect.