Steps to update SharePoint Top Navigation in Mobile view

when we access Top Navigation in desktop view mouse hover functionality will work to see all child menus but it wouldn't work on mobile view.
In mobile view we have to inject custom click functionality on parent menu by help of jquery.

Add below meta tags in master page html file

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

Find and replace Top Navigation id using below script line

$("ul[id*='RootAspMenu']").attr( "id", "myTopNav" );

And have below function on Master Page body

$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('li').has('ul').mouseover(function(){
$(this).children('ul').css('visibility','visible');}).mouseout(function(){
$(this).children('ul').css('visibility','hidden');})
}

// Mobile
$('#menu-wrap').prepend('<div id="menu-trigger">Menu</div>');
$("#menu-trigger").on("click", function(){$("#myTopNav").slideToggle();});

// iPad
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) $('#myTopNav ul').addClass('no-transition');    
    });  


Add below code into JS file and gave this reference into master page

$(function () {
    var pull = $('#pull');
    menu = $('div#DeltaTopNavigation ul#myTopNav');
    menu.find("ul").slideToggle();
    menu.find("li").on('click', function (e) {
        e.stopImmediatePropagation();
        $($(this).find('ul')[0]).slideToggle();
    });

    $(pull).on('click', function (e) {
        e.stopImmediatePropagation();
        menu.slideToggle();

    });

    $(window).resize(function () {
        var w = $(window).width();
        if (w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });

});

Save and upload masterpage to respective library.

Please reach me if you are not clear at any point of implementation.