title: How to set the navigation items to the left side of the page?
body: <p>We are creating a POS restaurant system, we would like to align the design so we can test the look and feel of the system at the same time. </p>
  
  <p>We are using Asp.net core and we have tried this repository from github to try some functionalities.</p>
  
  <pre><code>&lt;/head&gt;
  &lt;body&gt;
  &lt;header&gt;
      &lt;nav class="navbar navbar-inverse navbar-fixed-top box-shadow mb-3"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
              &lt;a class="navbar-brand" asp-area="" asp-controller="Home" 
  asp-action="Index"&gt;POS Title&lt;/a&gt;
              &lt;button class="navbar-toggler" type="button" data- 
  toggle="collapse" data-target=".navbar-collapse" aria- 
  controls="navbarSupportedContent"
                      aria-expanded="false" aria-label="Toggle navigation"&gt;
                  &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;/div&gt;
              &lt;partial name="_LoginPartial" /&gt;
              &lt;/nav&gt;
  
              &lt;div id="wrapper" class="toggled"&gt;&lt;/div&gt;
              &lt;div id="sidebar-wrapper"&gt;&lt;/div&gt;
                  &lt;ul class="sidebar-nav"style="margin-top:15px;"&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link text-dark" asp-area="" asp- 
  controller="Customer" asp-action="Index"&gt;Guest&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link text-dark" asp-area="" asp- 
  controller="Vendor" asp-action="Index"&gt;Supplier&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link text-dark" asp-area="" asp- 
  controller="Product" asp-action="Index"&gt;Menu&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link text-dark" asp-area="" asp- 
  controller="PurchaseOrder" asp-action="Index"&gt;Purchases&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link text-dark" asp-area="" asp- 
  controller="GoodsReceive" asp-action="Index"&gt;Goods Received&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link text-dark" asp-area="" asp- 
  controller="SalesOrder" asp-action="Index"&gt;Sales Order&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link text-dark" asp-area="" asp- 
   controller="SalesOrder" asp-action="POS"&gt;Point Of Sales&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link text-dark" asp-area="" asp- 
  controller="InvenTran" asp-action="Index"&gt;Inventory&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/nav&gt;
   &lt;/header&gt;
  
  &lt;div id="page-content-wrapper"&gt;
      &lt;div class="container-fluid"&gt;
      &lt;partial name="_CookieConsentPartial" /&gt;
      &lt;main role="main" class="pb-3"&gt;
          @RenderBody()
      &lt;/main&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;footer class="border-top footer text-muted"&gt;
      &lt;div class="container"&gt;
          &amp;copy; 2019 - POS Title - &lt;a asp-area="" asp-controller="Home" 
  asp-action="Privacy"&gt;Privacy Policy&lt;/a&gt;
      &lt;/div&gt;
  &lt;/footer&gt;
  
  &lt;environment include="Development"&gt;
      &lt;script src="~/lib/jquery/dist/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"&gt;&lt;/script&gt;
  &lt;/environment&gt;
  &lt;environment exclude="Development"&gt;
      &lt;script 
  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
              asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
              asp-fallback-test="window.jQuery"
              crossorigin="anonymous"
              integrity="sha256- 
  FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="&gt;
      &lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter- 
  bootstrap/4.1.3/js/bootstrap.bundle.min.js"
              asp-fallback- 
  src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
              asp-fallback-test="window.jQuery &amp;&amp; window.jQuery.fn &amp;&amp; 
  window.jQuery.fn.modal"
              crossorigin="anonymous"
              integrity="sha256- 
  E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4="&gt;
      &lt;/script&gt;
  &lt;/environment&gt;
  &lt;!--datatables.net--&gt;
  &lt;script src="~/lib/DataTables/datatables.min.js"&gt;&lt;/script&gt;
  &lt;!--datatables.net--&gt;
  &lt;!--axios--&gt;
  &lt;script src="~/lib/axios/axios.min.js"&gt;&lt;/script&gt;
  &lt;!--axios--&gt;
  &lt;!--jquery numpad--&gt;
  &lt;script src="~/lib/jquery-numpad/jquery.numpad.js"&gt;&lt;/script&gt;
  &lt;!--jquery numpad--&gt;
  &lt;!--toastr--&gt;
  &lt;script src="~/lib/toastr/toastr.min.js"&gt;&lt;/script&gt;
  &lt;!--toastr--&gt;
  &lt;script src="~/js/site.js" asp-append-version="true"&gt;&lt;/script&gt;
  
  @RenderSection("Scripts", required: false)
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So, it should be like, the navigation for Customer, Vendor, Product, PurchaseOrder, GoodsReceived and so on should be at the left side and when you click each of them, the content will be displayed at the center, the menu should also stay and visible as you navigate to other menus. Please help.</p>