Avatar of Murray Brown
Murray Brown
Flag for United Kingdom of Great Britain and Northern Ireland asked on

ASP.net Inset side Menu Bar in ASP.net MVC core


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">             &copy; 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>

Open in new window

@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>

Open in new window


Avatar of undefined
Last Comment

8/22/2022 - Mon

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.
See Pricing Options
Start Free Trial
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck