Different menu for Mobile view and Desktop view

anand kamane asked on October 24, 2018 15:36

I am developing shopping website using kentico cms 9.In website I want show different menu for mobile view and different menu for desktop view. How I achieve this.

Correct Answer

Brenden Kehren answered on October 25, 2018 13:34

The stylesheet is hiding the mobile section. Go to the Page Templates app and look for your Legal Root Template master page template. Then look for the mobile section. The Page Template app doesn't apply any css so you should see it.

0 votesVote for this answer Unmark Correct answer

Recent Answers


Brenden Kehren answered on October 24, 2018 15:55

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.

0 votesVote for this answer Mark as a Correct answer

Peter Mogilnitski answered on October 24, 2018 15:56 (last edited on October 24, 2018 20:58)

You can create 2 web parts(for ex: repeaters ) for mobile menu and desktop menu and then use device macors like : {% CurrentDevice.IsMobile %} and {% !CurrentDevice.IsMobile %} 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

0 votesVote for this answer Mark as a Correct answer

anand kamane answered on October 25, 2018 07:19

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-->
0 votesVote for this answer Mark as a Correct answer

Peter Mogilnitski answered on October 25, 2018 12:58

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.

1 votesVote for this answer Mark as a Correct answer

anand kamane answered on October 25, 2018 13:30

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 Image Text

0 votesVote for this answer Mark as a Correct answer

anand kamane answered on October 25, 2018 13:53

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 Image Text

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on October 25, 2018 13:55

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

1 votesVote for this answer Mark as a Correct answer

anand kamane answered on October 25, 2018 14:42

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. Image Text

0 votesVote for this answer Mark as a Correct answer

anand kamane answered on October 26, 2018 15:33

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.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.