I had written as part of my app a basic Menu which went horizontal across the top of the page and was in my _Layout.cshtml file. This was originally in .Net Core 1.1 with Angular 2. I'm also using a theme from Bootswatch.
I upgraded my app to .Net Core 2 and Angular 5 and also moved to Webpack. I upgraded bootstrap to version 4. Now when I run the same piece of code the menu is to the left and goes vertically. Here's my original code, what do I need to do to make this top and horizontal again.
<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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">My Site</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact t</a></li>
</ul>
@await Html.PartialAsync("_LoginPartial")
</div>
</div>
</div>
Ok,the issue is that webpack does not recognise bootswatch v4. In my Packages.json file I needed to ensure that both bootstrap and bootswatch were at version 3.3.7. Then in the non-shakable tree values in the webpacks config file I just needed to make a reference to bootwswatch/{theme that I want}/bootstrap.css there is no need to download the theme from the bootswatch site.