How to make an existing navbar with position fixed? - html

Question

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"> Login/Register </li>
<li> Home </li>
<li> About </li>
<li> Services </li>
<li> Products </li>
<li> Contact Us </li>
<li> <form class="form"> <input type="text" name="Search" placeholder="Search"> </form> </li>
</ul>
</nav>
</div>
</header>

Answer 1

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

Answer 2

Try the changes mentioned if it works for you. I think it may solve your problem.
CSS and
HTML
body
{
margin: 0;
background: #222;
font-weight: 300;
background-image: url('bg.jpeg');
}
header
{
background: #d9c2ac;
position: fixed; //Add this
top: 0;//Add this
left: 0;//Add this
z-index: 1000;//Add this
width: 100%;//Add this
}
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;
}
//Add this property to your content div
#content {
position: relative;
padding-top: 55px; // Height of your navbar
background-color: white;
}
<header>
<div class="container" id="#home">
<nav>
<ul>
<li id="login"> Login/Register </li>
<li> Home </li>
<li> About </li>
<li> Services </li>
<li> Products </li>
<li> Contact Us </li>
<li> <form class="form"> <input type="text" name="Search" placeholder="Search"> </form> </li>
</ul>
</nav>
</div>
</header>
<div id="content">Your body content here</div>