Hamburger Menu not showing on mobile devices

Question

I am using bootstrap 3.4.x, and for some reason my Menu is not visible on mobile devices. I am able to resize in browser and all is good, but viewing on a device nothing. View port is set in head tag, jquery is being loaded before bootstrap. I can't for the life of me find the issue. ??? Below is the desired result (site: site in question)

here is what mobile looks like:

Menu is missing

<!DOCTYPE html>
<html lang="en">  
<head><meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
    
 </head>
<body>
<form runat="server">
    <asp:ScriptManager runat="server">
        <Scripts>
            <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
            <%--Framework Scripts--%>
            <asp:ScriptReference Name="MsAjaxBundle" />
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="bootstrap" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site Scripts--%>
        </Scripts>
    </asp:ScriptManager>


 <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ham-menu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" runat="server" href="~/">LOGO Here</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav" id="ham-menu">
                    <li><a runat="server" href="~/">Home</a></li>
                    <li><a runat="server" href="~/Schedule">Schedule</a></li>
                    <li><a runat="server" href="~/Gallery">Gallery</a></li>
                    <li><a runat="server" href="~/About">About</a></li>
                    <li><a runat="server" href="~/Contact">Contact</a></li>
                </ul>
                <asp:LoginView runat="server" ViewStateMode="Disabled">
                    <AnonymousTemplate>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a runat="server" href="~/Account/Register">Register</a></li>
                            <li><a runat="server" href="~/Account/Login">Log in</a></li>
                        </ul>
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %>!</a>

                            </li>
                            <li>
                                <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                            </li>
                        </ul>
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
        </div>
    </div>
</body>
</html>

As much as I was able to debug, removing "collapse" from "navbar-collapse collapse" can help you get the menu in mobile. Hope it helps :) — krishna_tandon, Sep 15 '20 at 04:25
@krishna_tandon thank you, unfortunately, this did not fix issue. :( — ookie, Sep 15 '20 at 04:33
Can you update the same with the desired output? Maybe that can help us dive deep into the issue. — krishna_tandon, Sep 15 '20 at 05:30
@krishna_tandon I have updated question and added images to reflect — ookie, Sep 15 '20 at 14:41

score 2 · Answer 1 · answered Sep 16 '20 at 02:43

Update: I checked the site link you have given in question. It seems everything is rendering fine. Now you just need to move the id="ham-menu" attribute.

So, I copy pasted your code on a page where bootstrap 3.4.x was initialized properly. Turns out your HTML Code is fine with only one problem:

Move the id attribute from <ul> to the outer <div>.

<div class="navbar-collapse collapse" id="ham-menu"><!--To Here-->
  <ul class="nav navbar-nav"><!--From Here-->
    <li><a runat="server" href="~/">Home</a></li>
    <li><a runat="server" href="~/Schedule">Schedule</a></li>
    <li><a runat="server" href="~/Gallery">Gallery</a></li>
    <li><a runat="server" href="~/About">About</a></li>
    <li><a runat="server" href="~/Contact">Contact</a></li>
  </ul>
</div>

Now, make sure you have properly initialized bootstrap. Key points:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

I have tried move the ID, however this also did not work for me. I even copied in the above links. still no menu on mobile — ookie, Sep 16 '20 at 03:25

score 0 · Accepted Answer · answered Oct 21 '20 at 03:24

0

I found this article that worked. make sure to take note on Olorunfemi Ajibulu comment at the bottom. regrading remove additional files at destination!!

Disable aspnet.friendlyurl's mobile redirect for tablets

answered Oct 21 '20 at 03:24

ookie

138
11

Hamburger Menu not showing on mobile devices

2 Answers2