question

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

How to resize default ASP.net navbar to mobile?

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?

203293-image.png


And when I scroll right:

203267-image.png




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>
dotnet-csharpdotnet-aspnet-webforms
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