Create responsive design without Sitefinity CMS Responsive Design feature

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.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?