Bootstrap 3 Website Header Menu Collapse Not Working in Middle Screen Widths

Question

I have found that the header menu on my website changes from a horizontal to a vertical menu when shrinking below a specified size (presumably the tablet width), rather than collapsing so that the bars icon needs to be clicked to show the full menu, the full menu stays open blocking access to the page below. When shrunk yet further (presumably to mobile width) the vertical menu does collapse leaving the icon to be clicked, which is exactly what should happen. The HeaderMenu.cshtml and _Header.cshtml are shown below:

<div class="navbar-collapse collapse float-right nav-main-collapse">
    <nav class="nav-main">
        <ul id="topMain" class="nav nav-tabs nav-button-tabs nav-tabs-justified">

            <li class="nav-item"><a href="@Url.Action("Index","Home")" class="nav-link ">Home</a></li>
            <li class="nav-item"><a href="@Url.Action("Meetings","Meeting")" class="nav-link">Meetings</a></li>
            <li class="nav-item"><a href="@Url.Action("NewsPosts","News")" class="nav-link">News</a></li>
            <!--<li class="nav-item"><a href="@Url.Action("NotesAndQueries","NotesAndQueries")" class="nav-link">Notes &amp; Queries</a></li>-->
            <li class="nav-item"><a href="@Url.Action("Proceedings","Proceedings")" class="nav-link">Proceedings</a></li>
            <li class="nav-item"><a href="@Url.Action("Publications","Publications")" class="nav-link">Publications</a></li>
            <li class="nav-item"><a href="@Url.Action("Images","Gallery")" class="nav-link">Gallery</a></li>
            <li class="nav-item"><a href="@Url.Action("MembershipApplication","MembershipApplication")" class="nav-link">Membership</a></li>
            <li class="nav-item"><a href="@Url.Action("Enquiries","Enquiry")" class="nav-link">Enquiries</a></li>
            <li class="nav-item"><a href="@Url.Action("Officers","Meeting")" class="nav-link">Committee</a></li>
            <li class="nav-item"><a href="@Url.Action("links","links")" class="nav-link">Links</a></li>

            @if (SignInManager.IsSignedIn(User))
            {
                <li class="nav-item"><a href="@Url.Action("Index","Admin")" class="nav-link">Admin</a></li>

            }
        </ul>
    </nav>
</div>

<div id="header" class="navbar-toggleable-md sticky clearfix">
    <!-- TOP NAV -->
    <header id="topNav">
        <div class="container">
            <!-- Mobile Menu Button -->
            <button class="btn btn-mobile" data-toggle="collapse" data-target=".nav-main-collapse">
                <i class="fa fa-bars"></i>
            </button>
            <link rel="shortcut icon" href="http://historyofbath.org/HBRG Logo.png" type="image/x-icon" />

            <!-- Logo -->
            <a class="logo float-left" href="/">
                <img style="height:100px;" src="~/images/HBRG Logo.png" alt="Logo" />
            </a>
            @Html.Partial("_HeaderMenu")
         </div>
    </header>
    <!-- /Top Nav -->
</div>

The odd thing is that I have an almost identical site where this problem does not occur. All of the css libraries are the same, the scripts.js is identical, etc. One was built from the other and this header menu is identical apart from the obvious internal references. I have tinkered around with this endlessly and cannot get the vertical menu to collapse as it should.

Answer 1

I found that the issue was in the _Layout.cshtml file:

<!-- CORE CSS -->

    `<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />`
    `<link href="~/lib/bootstrap3/css/bootstrap.min.css" rel="stylesheet" />`

by removing the reference to bootstrap3 the menu in mobile landscape mode comes up as a collapsed icon as it should.

If anyone can explain why this caused an issue here and yet works fine in the Staging, Production section, please let me know.

Answer 2

I hope this help you:

 <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
      <a class="navbar-brand" href="#">Absalon TTT</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
      </div>
    </nav>