How to resize default ASP.net navbar to mobile?

Question

I'm developing a website using ASP.net and am using the default navbar that ASP.net generates with Site.Master. I deleted the Site.MobileMaster since I want the navbar to be there for mobile users as well but it doesn't reshape itself and becomes long, causing the user needs to scroll to the left to find the default dropdown menu. How can I make it so the navbar only takes the necessary space on a mobile screen?

And when I scroll right:

The code for the NavBar is the following:

<div id="myNavBar" class="navbar navbar-inverse navbar-fixed-top">  
        <script type="text/javascript">  
    function autocollapse() {  
        var navbar = $('#myNavBar');  
        navbar.removeClass('collapsed');   
        if (navbar.innerHeight() > 50)  
            navbar.addClass('collapsed'); // collapse mode  
    }  
$(document).on('ready', autocollapse);  
$(window).on('resize', autocollapse);  
        </script>  
        <div class="container">  
            <div class="navbar-header">  
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
                    <span class="icon-bar"></span>  
                    <span class="icon-bar"></span>  
                    <span class="icon-bar"></span>  
                </button>  
                <a class="navbar-brand" runat="server" href="~/">BoMa</a>  
            </div>  
            <div class="navbar-collapse collapse">  
                <ul class="nav navbar-nav">  
                    <li><a runat="server" href="~/">Home</a></li>  
                    <li><a runat="server" href="~/About">Sobre Mim</a></li>  
                    <li><a runat="server" href="~/AI">Como funciona?</a></li>  
                </ul>  
            </div>  
        </div>  
    </div>