asked on ASP.net Inset side Menu Bar in ASP.net MVC core
Hi
I am trying to build an ASP.net Core MVC project with a top and side menu.
I have added code to the default Layout page below. It starts at <!Sidemenu> and ends at <!Side Menu End> but I am seeing the page shown in the image below on my Index page, whose code is shown below that. What do I have to do on the Layout page to shift everything to the right so that only the menu stays on the left?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - MurrayBrown</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/MurrayBrown.styles.css" asp-append-version="true" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">MurrayBrown</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<!--- Sidemenu -->
<ul class="metismenu side-nav">
<li class="side-nav-title side-nav-item">Navigation</li>
<li class="side-nav-item">
<a href="javascript: void(0);" class="side-nav-link" aria-expanded="true">
<i class="uil-home-alt"></i>
<span> Home </span>
<span class="menu-arrow"></span>
</a>
<ul class="side-nav-second-level mm-collapse mm-show" aria-expanded="true">
<li>
<a href="~/">Policies</a>
</li>
<li>
<a href="~/Lists">Lists</a>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
<!-- Sidemenu end -->
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - MurrayBrown - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<style>
[class*="col-"]{
background-color:lightblue;
border: 1px solid blue;
}
</style>
<div class="text-center">
<h1 class="display-4">Murray Brown!</h1>
<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
<!-- The Container div goes around a grid https://aspnetcore.readthedocs.io/en/latest/client-side/bootstrap.html -->
<!-- Next place a row div and in that column divs. For the column divs the first class is for mobile screens and the second for PC-->
<!-- col-xs-12 is the mobile phone part spanning the whole screen & col-md-8 is PC sixe screen that only spans 2/3 of the screen-->
<!-- note that the second row has a mobile column size of col-xs-6 which means that it will be on the row below -->
<!-- BUT because w is only two thirs used the second row will move up to the first row (col-md-4) in the full PC size -->
<div class = "container">
<div class="row">
<div class = "row">
<div class="col-xs-12 col-md-8">
One
</div>
<div class = "col-xs-6 col-md-4">
Two
</div>
<div class = "col-xs-6 col-md-4">
Three
</div>
<div class = "col-xs-12 col-md-4">
Four
</div>
<div class = "col-xs-12 col-md-4">
Five
</div>
</div>
</div>
<div>
<h1 class="display-2">Button Examples</h1>
<button type="button" class="btn btn-primary">btn-primary</button>
<button type="button" class="btn btn-default">btn-default</button>
<button type="button" class="btn btn-success">btn-success</button>
<button type="button" class="btn btn-info">btn-info</button>
<button type="button" class="btn btn-warning">btn-warning</button>
<button type="button" class="btn btn-danger">btn-danger</button>
<button type="button" class="btn btn-link">btn-link</button>
<h5>Badges</h5>
Inbox<span class="badge">27</span>
<h5>Alerts</h5>
<div class = "alert alert-success">
<strong>Success!</strong> Well done.
</div>
<div class = "alert alert-info">
<strong>FYI</strong> You might need to know this
</div>
<div class = "alert alert-warning">
<strong>FYI</strong> Use caution
</div>
<div class= "alert alert-danger">
<strong>FYI</strong> Something's wrong'
</div>
</div>
</div>
ASP.NET
Last Comment
Misha
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.