After creating an MVC 5 project, the decision was made to change the menu by incorporating Bootswatch. The desired menu to implement is displayed below:
https://i.sstatic.net/2vqxn.png
The initial step involved modifying the general style of the project which entailed downloading the bootstrap.css file as shown here:
https://i.sstatic.net/8QZUc.png
Subsequently, the bootstrap.css file was swapped with BundleConfig to alter the style of the project. However, the desired navbar was not included as anticipated:
https://i.sstatic.net/twQRm.png
To implement the desired Navbar, the following code was inserted into the _Layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Muebles Pangal</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<a class="navbar-brand" href="#">Muebles Pangal</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="@Url.Action("Index", "Categorias")">Categorias </a>
</li>
<li class="nav-item">
<a class="nav-link" href="@Url.Action("Index", "Productoes")">Productos </a>
</li>
<li class="nav-item">
<a class="nav-link" href="@Url.Action("Index", "Ubicacions")">Proveedores </a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" placeholder="Buscar" type="text">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Buscar</button>
</form>
</div>
</nav>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - Sistema Bodega</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
Upon executing the project, it was noticed that the menu did not perform effectively with responsive calls. Specifically, upon changing the browser size and calling the menu, the
<span class = "navbar-toggler-icon"> </ span>https://i.sstatic.net/CaPxw.png
This issue persisted despite various attempts to rectify it. Bootstrap and Bootstrap.less packages have been installed, yet the problem remains unsolved. Assistance in resolving this matter would be greatly appreciated. Any suggestions?
Is there any help available for this issue?