How to show drop down of my navbar only on click?

Question

I have a dynamic navbar that get url data from database; it works fine on computer but if I try to access dropdowns with my mobile, doesn't show anything.

My code is like this:

<ul id="navBar"></ul>

$(document).ready(function() {
   $.ajax({
    type: 'Get',
    url: '@Url.Action("GetDataForNavBar", controllerName, new { Area="" })',
    success: function (data) {
        $("#navBar").kendoMenu({
            dataSource: data.data
        });
    }
   });
});

public ActionResult GetDataForNavBar(){
    List<MenuOptions> optionMenu = ManagerService.MenuOptionsManager.GetAll().ToList();            
    List<MenuOptions> menusParent = optionMenu.Where(a => a.parent == null).ToList();            

    foreach (MenuOptions menu in menusParent)
    {
        menu.children.AddRange(optionMenu.Where(a => a.parent == menu.id));                
    }

    //Create list for view
    var result = menusParent.Select(a => new
    {
        text = a.title,
        items = a.children.Where(b => b.parent == a.id).Select(c => new
        {
            text = c.title,
            url = Url.Action(c.view, c.controller, new { Area = c.area })
        }).ToList()
    });

    return Json(new { data = result }, JsonRequestBehavior.AllowGet);
}

Answer 1

If you show on desktop and do not showing mobile devices on same address and parameters, you can control your css classes or styles. Firstly you must check your DOM element on developer tools (F12), you need to see menu items. if what I say is valid, chek your css property and values. Control kendo menu classes, or if has property. If you write an example or link maybe i can help you.

Answer 2

I add this to the menu configuration to solve it

openOnClick: {
    rootMenuItems: true
}