Different menu for Mobile view and Desktop view

What we've done in the past is setup navigation categories in the Categories app. Start out by adding a new category called Navigation. Under Navigation add the following:

• Top
• Main
• Footer
• Mobile

These will be used in your repeaters to set specifics on which pages appear in which navigation structure. Assign the respective categories to the respective pages.

In your page template, add a repeater for the main navigation and set the properties of the path, page type, category (Main) and transformation. Now add a second repeater for the mobile navigation and set the properties of the path, page type, category (Mobile) and transformation. This should get you what you're looking for.

What you might want to consider though if you have a large content tree is caching both navigation items by setting the properties in each of the webparts so they don't query the whole site each page load.

You can create 2 web parts(for ex: repeaters ) for mobile menu and desktop menu and then use device macors like : {% CurrentDevice.IsMobile |(identity)GlobalAdministrator%} to enable disable them, so only one web part will be visible based those macros. Your document type (pagemenuitem) can have a couple boolean fields: ismobile and isdesktop.

P.S. The other way is to use frame work like bootstrap, where you can do: <div class="visible-xs visible-sm">You're using a fairly small device.</div> Essential you have one menu web parts but content is hidden/shown on client based on bootstrap

Thanks @Brenden Kehren and Peter Mogilnitski for quick reply, Actually I am new to kentico cms and I am doing some maintains work on this project and for display mobile view menu they used below code.But I am not able to find out where they exactly binding mobile menu to ZoneID=”zMobileMenuLoggedIn” and ZoneID=”zMobileMenuLoggedOut”.Can someone help to resolve this issue. Below is my Code

  <div class="mobile-menu-wrapper show-for-small-only">
    <div class="" style="text-align: center; width: 100%; padding-left: 35px;">  
        <a href="/"><img class="mobile-logo" src="/images/logo-home@2x.png"  width="127"/></a>
    </div>

    <a class="left-off-canvas-toggle" href="#"></a>
    <aside class="left-off-canvas-menu">
      <div class="mobile-menu-header">
        <a href="/"><img src="/images/logo-home@2x.png"  width="100"/></a>
      </div>
   <cms:CMSWebPartZone ZoneID="zMobileMenuLoggedIn" runat="server" />
      <cms:CMSWebPartZone ZoneID="zMobileMenuLoggedOut" runat="server" />
    </aside>
  </div>
  <!--end: mobile menu-->

what you showing us is the layout. you have to switch to design tab and look at the web parts that are put inside those web part zones (i.e zMobileMenuLoggedIn and zMobileMenuLoggedOut). Seems like you have more, than that.

Thanks @Peter Mogilnitski I tried this way also but in design tab I able see only desktop mode webparts.I am not able to see web part zones (i.e zMobileMenuLoggedIn and zMobileMenuLoggedOut). Pls check below image

Thanks @Breneden Kehren.I followed below steps for Page Templates app.Property tab=>Template and I got below screen.Pls correct me If I went wrong location to finding mobile location.but I am not able see the section there.Thanks again for help

Wrong location. Click the Kentico icon in the upper left. Expand the Development section and look for Page Templates. That's where you want to be

Thanks @Brenden Kehren its works.I need one more help mobile menu navigation(hyperlink)redirect wrong page I need to be correct this.In Desktop mode I did.(Please check below Image how i changed hyperlink in desktop mode).but for mobile section I am not able to find.

I got the solution its binding from "CMS_Tree" table.I changed the node alias path column value But when I hover the mouse on hyperlink its showing correct redirection path but opening wrong page.Can someone guide where I went wrong.