[SOLVED] How to make an existing navbar with position fixed?

How to make an existing navbar with position fixed?

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?

HTML:

   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;
    }

    <header>
        <div class="container" id="#home">
            <nav>
                <ul> 
                    <li id="login"> <a href="#login" style="text-align: left;"> Login/Register                        </a> </li>
                    <li> <a href="#home"> Home </a></li>
                    <li> <a href="#about"> About </a></li>
                    <li> <a href="#services"> Services </a></li>
                    <li> <a href="#Products"> Products </a></li>
                    <li> <a href="#contact"> Contact Us </a></li>
                     <li> <form class="form"> <input type="text" name="Search"                                            placeholder="Search"> </form> </li>
                 </ul>
            </nav>
        </div>
    </header>

Solution

change some css

header
 {
   background: #d9c2ac;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   z-index: 99; //Change as per your requirement.
 }