Create responsive design without Sitefinity CMS Responsive Design feature | WebForms

You can use responsive navigation transformations without going through Sitefinity CMS Responsive Design feature. To do this, you can add some customized media queries in the templates of the navigation transformations.

Perform the following:

1. Add the Navigation widget on the page and click its Edit button.
2. Select the template that you want to modify.
3. Click Edit Selected Template.
   The Edit Template dialog appears. 
4. To transform the Navigation widget to ToggleMenu on a small resolution devices, add the following inside the <div> tag of class sfNavWrp:
   
5. To apply a transformation, you can, for example, use the following style directly into a <style></style> tag in the template or add it in external CSS file and refer it:
   

   NOTE: You need to replace the {{selector}} placeholder either with the sfNavWrp outer wrapper class or with the custom CSS class you specified in the widget designer of your Navigation widget. For more information, see Navigation widget.

The above transformation turns the Navigation widget into toggle menu, when it is displayed on device with a smaller display.