After creating a new MVC web project using VS2017, the default app's navigation menu bar appeared normal.
https://i.sstatic.net/S3Pcc.png
However, upon upgrading the Nuget packages (specifically Bootstrap from 3.3.7 to 4.1.3 and Popper 1.14) and running the default app again, something strange happened. The menu items, which usually run horizontally, became hidden. Clicking on the small icon next to "Application name" revealed the menu as a dropdown (see image).
All I did was upgrade the Nuget packages, so Bootstrap and other elements were updated in the process.
I find it hard to believe that I'm the only one experiencing this issue, yet I haven't come across any similar examples or problems. I checked the Content folder, BundleConfig.cs, _Layout.cshtml, and everything seemed normal.
I even inspected using F12 and found no broken links to stylesheets, etc.
Has anyone else encountered this problem?
https://i.sstatic.net/OXGsq.png
Here is the menu code snippet from _Layout.cshtml.
<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=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@*@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })*@
<a class="navbar-brand" href="#">App name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
This is the standard-looking code from BundleConfig.cs:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
}