+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / Standard navigation widget in Sitefinity doesn't support larger touchscreens?

Standard navigation widget in Sitefinity doesn't support larger touchscreens?

6 posts, 0 answered
  1. Jason
    Jason avatar
    4 posts
    Registered:
    26 Dec 2014
    29 Apr 2015
    Link to this post

    I'm using the standard Sitefinity navigation widget on my website. It's a fairly standard setup, several parent items, each with several child links in a drop-down that are revealed on hover. So far so good.

    I've also set it up so that on smaller screens (i.e. mobile), it switches to the more touchscreen-friendly toggle menu, also a standard Sitefinity feature. So far so good.

    The problem comes when accessing the website on larger touchscreen devices (i.e. tablets, some of which are just as wide as the desktop version of the site): hover doesn't work on touchscreens, so the drop-down menus are no longer accessible. Tapping the parent item just takes you to the parent page. 

    My question is, what is the appropriate method for dealing with this issue?

    Additional info: For now, I set it up so that the toggle menu always shows if JavaScript detects the device being touch enabled. That makes the website useable, but introduces yet another issue on touchscreen devices that also have trackpads or mouse input (e.g. Windows 8 laptops and even some desktops); you get a massive toggle menu when a "desktop" menu would probably look/work better.

  2. Jason
    Jason avatar
    4 posts
    Registered:
    26 Dec 2014
    30 Apr 2015
    Link to this post

    Maybe I gave too much info in the first post...so here it is simplified:

    The standard hover-drop down menu provided by Sitefinity doesn't work on some tablets because the hover state does not exist with touchscreens. What is the recommended solution to this ​issue?

  3. Svetoslav Manchev
    Svetoslav Manchev avatar
    735 posts
    Registered:
    29 Nov 2016
    04 May 2015
    Link to this post
    Hello Jason,

    In order to achieve you need you can try the following approach:
    - Go to your Page/Page template (where the navigation widget is placed)
    - Click Edit > Edit Selected Template (screenshot)
    - Find and Set the variable whetherToOpenOnClick to false (var whetherToOpenOnClick = false;)

    This should open the drop-down on hover but click should open the page.

    Usually this setting is set to true for mobile devices where no hover.

    In case you want to have both options depending on the device used, you have two options:
    1) Add the following code in the template:
    var whetherToOpenOnClick = false;
    var onMobile = kendo.support.mobileOS;
       
    if(onMobile)
    {
      whetherToOpenOnClick = true;
    }

    2) Add two navigation menus with different settings and hide/show one of them depending of the screen resolution using css media queries.

    I hope this information helps.

    Regards,
    Svetoslav Manchev
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  4. Jason
    Jason avatar
    4 posts
    Registered:
    26 Dec 2014
    07 May 2015 in reply to Svetoslav Manchev
    Link to this post
    Thanks, I will look into this and see if I can get it working.
  5. Jason
    Jason avatar
    4 posts
    Registered:
    26 Dec 2014
    19 May 2015 in reply to Svetoslav Manchev
    Link to this post

    OK, I tried the code above.

    It "worked", but not the way I need it to. The parent link in each drop-down is no longer clickable, and I need it to be.

    I also would need it to recognize when the device is a touchscreen, regardless of screen size (Windows​ 8 laptops, larger tablets, etc).

    Basically, all I need the menu to do is reliably convert the hover state to a click/tap for the parent link; first tap on the parent link brings up the drop-down, and the second tap on the parent link actually takes you to the parent page.

  6. Svetoslav Manchev
    Svetoslav Manchev avatar
    735 posts
    Registered:
    29 Nov 2016
    22 May 2015
    Link to this post
    Hello Jason,

    Along with the option to add second menu for the different devices with the behaviour you need, you can create the parent page as Group page, in that way you will fix the issue on both types of devices.

    Regards,
    Svetoslav Manchev
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
6 posts, 0 answered