title: How to make an existing navbar with position fixed?
body: <p>I made the following nav bar for the website of a client. But just at the end Client told me to make this navbar fixed on top, Obviously it will take a lot of time and effort to build a navbar from scratch just to make it fixed on top. Is there any way I can make my existing navbar fixed on top by modifying CSS?</p>
  
  <p>HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>   body
      {
          margin: 0;
          background: #222;
          font-weight: 300;
          background-image: url('bg.jpeg');
  
      }
  
      header
      {
          background: #d9c2ac;
          position: relative;
      }
  
      header::after
      {
          content: '';
          display: table;
          clear: both;
      }
  
      nav
      {
          float: left;
      }
  
      nav ul
      {
          margin: 0;
          padding: 0;
          list-style: none;
      }
  
      nav li
      {
          display: inline-block;
          margin-left: 70px;
          padding-top: 30px;
          position: relative;
      }
  
      nav ul li  a
      {
      color: #444;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 14px;
      font-weight: bold;
      }
  
      nav a:hover
      {
  
      }
  
  
      nav a::before
      {
          content: '';
          display: block;
          height: 5px;
          width: 0%;
          background-color: #444;
  
          transition: all ease-in-out 500ms;
  
  
      }
  
      nav ul li:last-child
      {
      position: absolute;
      right: 0;
      bottom:  0;
      margin: 15px;
      margin-bottom: 0px;
      padding: 0;
      }
  
      nav ul li:first-child {
        margin-left: 0;
      }
      nav a:hover::before
      {
          width: 100%;
      }
  
      nav ul li:last-child
      {
          margin-right: auto;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;header&gt;
          &lt;div class="container" id="#home"&gt;
              &lt;nav&gt;
                  &lt;ul&gt; 
                      &lt;li id="login"&gt; &lt;a href="#login" style="text-align: left;"&gt; Login/Register                        &lt;/a&gt; &lt;/li&gt;
                      &lt;li&gt; &lt;a href="#home"&gt; Home &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt; &lt;a href="#about"&gt; About &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt; &lt;a href="#services"&gt; Services &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt; &lt;a href="#Products"&gt; Products &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt; &lt;a href="#contact"&gt; Contact Us &lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt; &lt;form class="form"&gt; &lt;input type="text" name="Search"                                            placeholder="Search"&gt; &lt;/form&gt; &lt;/li&gt;
                   &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/header&gt; </code></pre>
  </div>
  </div>
  </p>