GuilhermeOliveira-8788 avatar image
0 Votes"
GuilhermeOliveira-8788 asked

How to resize default navbar to mobile?

I'm developing a website using and am using the default navbar that 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');
         if (navbar.innerHeight() > 50)
             navbar.addClass('collapsed'); // collapse mode
 $(document).on('ready', autocollapse);
 $(window).on('resize', autocollapse);
         <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>
                 <a class="navbar-brand" runat="server" href="~/">BoMa</a>
             <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>
image.png (84.4 KiB)
image.png (10.5 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

0 Answers