I recently made changes to my MVC project by switching the default Bootstrap theme to Bootswatch - Cosmos. However, I am facing an issue with the Navbar as shown in the image below:
View Header Display Issue Image
Initially, I was using Bootstrap 3.0 and Bootswatch 3.0 to avoid any version conflicts.
Here are the steps I have taken so far:
- Added cosmos-bootstrap.css and cosmos-bootstrap.min.css to the content folder
Referenced the CSS file in my BundleConfig.cs:
bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/cosmos-bootstrap.css", "~/Content/site.css"));Checked my _Layout.cshtml for Styles reference:
@Styles.Render("~/Content/css")Upgraded Bootstrap to v4 and tried Cosmos v4, but still encountered the same issue.
The problem seems to be specific to the Navbar, as other fonts and buttons from Cosmos display fine. I also tested other Bootstrap themes, all resulting in the same Navbar issue.
Any assistance on this matter would be highly appreciated.
EDIT: HTML code for Navbar is provided below:
<body>
<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("Portal", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</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>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - TEST IT SOLUTIONS</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)