title: Navigation menu on the left side with close and open button in ASP.NET Core razor pages application
body: <p>I am using razor pages for my application. I tried to move the navigation menu from top to left side. I followed the steps mentioned in this link <a href="https://stackoverflow.com/questions/30281993/how-to-create-sidebar-menu-in-bootstrap-that-stays">how to create sidebar menu in bootstrap that stays?</a> since I want my menu to be exactly as shown in that link. But I couldn't achieve the result. Something about simple-sidebar.css is mentioned in the link but I would like to know where exactly and how it should be added to my razor pages project. What changes should I make to move my navigation menu from top to left side as shown in the link that I mentioned since it is not working for my razor pages project? A detailed explanation would be really helpful as I am new to razor pages. The code in my "_Layout.cshtml" is shown below. Please help me with this issue.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
  &lt;title&gt;@ViewData["Title"] - Sample&lt;/title&gt;
  
  &lt;environment include="Development"&gt;
      &lt;link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /&gt;
      &lt;link rel="stylesheet" href="~/css/site.css" /&gt;
  &lt;/environment&gt;
  &lt;environment exclude="Development"&gt;
      &lt;link rel="stylesheet" 
  href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
            asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
            asp-fallback-test-class="sr-only" asp-fallback-test- 
  property="position" asp-fallback-test-value="absolute" /&gt;
      &lt;link rel="stylesheet" href="~/css/site.min.css" asp-append- 
  version="true" /&gt;
  &lt;/environment&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;a asp-page="/Index" class="navbar-brand"&gt;Home&lt;/a&gt;
              &lt;a asp-page="/Pinpad" class="navbar-brand"&gt;Pinpad&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  &lt;div class="container body-content"&gt;
      @RenderBody()
      &lt;footer&gt;&lt;/footer&gt;
  &lt;/div&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.js"&gt;&lt;/script&gt;
      &lt;script src="~/js/site.js" asp-append-version="true"&gt;&lt;/script&gt;
  &lt;/environment&gt;
  &lt;environment exclude="Development"&gt;
      &lt;script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
              asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
              asp-fallback-test="window.jQuery"
              crossorigin="anonymous"&gt;
      &lt;/script&gt;
      &lt;script 
   src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
              asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
              asp-fallback-test="window.jQuery &amp;&amp; window.jQuery.fn &amp;&amp; 
   window.jQuery.fn.modal"
              crossorigin="anonymous"&gt;
      &lt;/script&gt;
      &lt;script src="~/js/site.min.js" asp-append-version="true"&gt;&lt;/script&gt;
  &lt;/environment&gt;
  
  @RenderSection("Scripts", required: false)
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>