Navigation - Responsive Behavior

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Telerik ASP.NET Navigation comes with built-in responsive behavior. When accessed via a mobile device, the control changes to create a user experience tailored to the device screen size. In this mode, RadNavigation is mobile-friendly and its touch zones are bigger and easier to select.

Viewport adjustment

For fine-tuning of the viewport you could add the following meta tag in the head section of the page:

< meta name = "viewport" content = "width=device-width, initial-scale=1" />

For optimal experience on mobile devices, we suggest that you use Telerik controls together with the Page Layout Framework, which will add responsive capabilities to your layout.

See more mobile-optimized demos of Telerik controls in this responsive sample app.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Navigation_Mobile_And_Touch_Support_Responsive_Behavior_DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-thin no-bg">
        <qsf:QrCode ID="QrCode1" runat="server" NavigateUrl="http://tlrk.it/1ASbyL3"></qsf:QrCode>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?