title: MVC Net Core Sidebar Navigation Menu Placing in _Layout.cshtml
body: <p>I created a simple MVC Net Core Default Project. I made some adjustments so it looks picture. Right now _Layout.cshtml only has top Navigation bar.</p>
  
  <p><a href="https://i.stack.imgur.com/9Rstp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Rstp.png" alt="enter image description here"></a></p>
  
  <p>I want to add Left navigation bar, reading resource here. 
  <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>. 
  Where would I place it in cshtml file below? I tried placing around area below and did not work correctly.   </p>
  
  <pre><code>&lt;div class="container body-content"&gt;
  @RenderBody() area, 
  </code></pre>
  
  <p>Where would I place the Navbar code snippet in the cshtml below? Everytime I place it, it gets misaligned.</p>
  
  <p><strong>Full _Layout.cshtml</strong></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"] - ElectronicsStore&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"&gt;  
          &lt;div class="container-fluid"&gt;  
              &lt;!--Navbar Header Start Here--&gt;  
              &lt;div class="navbar-header"&gt;  
                  &lt;a class="navbar-brand" href="#"&gt;&lt;font color="#fff"&gt;&lt;b&gt;Electronics&lt;/b&gt;&lt;/font&gt;&lt;/a&gt;  
              &lt;/div&gt;  
              &lt;!--Navbar Header End Here--&gt;  
              &lt;!--Menu Start Here--&gt;  
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a asp-area="" asp-controller="Home" asp-action="Index"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a asp-area="" asp-controller="Home" asp-action="About"&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a asp-area="" asp-controller="Home" asp-action="Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;!--dropdown Menu Start--&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;
                          Technology
                          &lt;span class="caret"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;.NET&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;HTML5&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;ASP.NET MVC&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Java&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;!--dropdown Menu End--&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;  
              &lt;!--Menu End Here--&gt;  
              &lt;!--Right Aligned Menu Start--&gt;  
              &lt;ul class="nav navbar-nav navbar-right"&gt;  
                  &lt;li&gt;&lt;a href="#"&gt;&lt;font color="#fff"&gt;Login&lt;/font&gt;&lt;/a&gt;&lt;/li&gt;  
                  &lt;li&gt;&lt;a href="#"&gt;&lt;font color="#fff"&gt;Cart&lt;/font&gt;&lt;/a&gt;&lt;/li&gt;  
              &lt;/ul&gt;  
              &lt;!--Right Aligned Menu End--&gt;  
          &lt;/div&gt;  
      &lt;/nav&gt; 
  
      &lt;div class="container body-content"&gt;
       // TRIED PLACING IT AROUND HERE, DOES NOT WORK
          @RenderBody()
          &lt;hr /&gt;
          &lt;footer&gt;
              &lt;p&gt;&amp;copy; 2018 - ElectronicsStore&lt;/p&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"
                  integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk"&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"
                  integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"&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>
  
  <p><strong>Left SideBar Code to Place:</strong></p>
  
  <pre><code> &lt;!-- Sidebar --&gt;
      &lt;div id="sidebar-wrapper"&gt;
          &lt;ul id="sidebar_menu" class="sidebar-nav" style="text-align: right; padding-right: 10px;
              padding-top: 10px"&gt;
              &lt;li class="sidebar-brand"&gt;&lt;a id="menu-toggle" href="#"&gt;&lt;span id="main_icon" class="navbar-icon fa fa-bars icon"&gt;
              &lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="sidebar-nav"&gt;
              &lt;li class="sidebar-brand"&gt;&lt;a href="#"&gt;Start Bootstrap &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt; &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt; &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt; &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- /#sidebar-wrapper -- &gt;
  </code></pre>