Creating sticky/absolute navbar

Question

I have above code for navbar.However,I want this navbar to be sticky and not move out of the screen when I scroll down.I have tried using position as absolute and sticky but on scrolling the navbar is left behind.Kindly help me out.Below is css code for the navbar:

    .header {
  overflow: hidden;
  background-color: #FFF;
  border-bottom: 1px solid grey;
}

input{    
margin-left: 40px;
    background: url(search.svg) no-repeat left;
    height: 40px;
    padding-left: 25px;
    width: 72%;
    border: 5px white;
}

.header a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 8px 12px;
  text-decoration: none;
  font-size: 17px;
  padding-right: 30px;
  border-right: 1px solid grey;
}


#search-text-input{
    border-top:thin solid  #e5e5e5;
    border-right:thin solid #e5e5e5;
    border-bottom:0;
    border-left:thin solid  #e5e5e5;
    box-shadow:0px 1px 1px 1px #e5e5e5;
    float:left;
    height:17px;
    margin:.8em 0 0 .5em; 
    outline:0;
    padding:.4em 0 .4em .6em; 
    width:183px; 
}

#button-holder{
    background-color:#f1f1f1;
    border-top:thin solid #e5e5e5;
    box-shadow:1px 1px 1px 1px #e5e5e5;
    cursor:pointer;
    float:left;
    height:27px;
    margin:11px 0 0 0;
    text-align:center;
    width:50px;
}

#button-holder img{
    margin:4px;
    width:20px; 
}

<div class="header">
  <a><img src="logo.svg" class="logo"></a>
  <input type='text' placeholder='search..' id='search' />
  <img src="notification.svg" class="logo" style="padding-right: 10px;">
  <img src="user_1.svg" class="logo" style="padding-right: 10px;padding-top: 6px;width: 40px;height: 28px;">
</div>

enter code here

Answer 1

Can you please check the below code? Hope it will work for you. position: sticky; is positioned based on the user's scroll position. With the help of this property, you can make your header sticky on scrolling down.

Please refer to this link: https://jsfiddle.net/yudizsolutions/7tsx3vra/

body {
  margin: 0;
}

.header {
  overflow: hidden;
  background-color: #FFF;
  border-bottom: 1px solid grey;
  position: sticky;
  top: 0;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
}

input {
  margin-left: 40px;
  background: url(search.svg) no-repeat left;
  height: 40px;
  padding-left: 25px;
  width: 72%;
  border: 5px white;
}

.header a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 8px 12px;
  text-decoration: none;
  font-size: 17px;
  padding-right: 30px;
  border-right: 1px solid grey;
}

#search-text-input {
  border-top: thin solid #e5e5e5;
  border-right: thin solid #e5e5e5;
  border-bottom: 0;
  border-left: thin solid #e5e5e5;
  box-shadow: 0px 1px 1px 1px #e5e5e5;
  float: left;
  height: 17px;
  margin: .8em 0 0 .5em;
  outline: 0;
  padding: .4em 0 .4em .6em;
  width: 183px;
}

#button-holder {
  background-color: #f1f1f1;
  border-top: thin solid #e5e5e5;
  box-shadow: 1px 1px 1px 1px #e5e5e5;
  cursor: pointer;
  float: left;
  height: 27px;
  margin: 11px 0 0 0;
  text-align: center;
  width: 50px;
}

#button-holder img {
  margin: 4px;
  width: 20px;
}

<div class="header">
  <a><img src="https://via.placeholder.com/52x42" class="logo"></a>
  <input type='text' placeholder='search..' id='search' />
  <img src="https://via.placeholder.com/36" class="logo" style="padding-right: 10px;">
  <img src="https://via.placeholder.com/36" class="logo" style="padding-right: 10px;padding-top: 6px;width: 40px;height: 28px;">
</div>
<div class="text-content">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <img src="https://via.placeholder.com/350" alt="placeholder-img">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
  <img src="https://via.placeholder.com/350" alt="placeholder-img">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel exercitationem temporibus autem eius sed similique? Accusantium, perspiciatis reprehenderit voluptas consequatur earum cum perferendis cumque optio sed quisquam distinctio placeat nulla.
  </p>
</div>

Answer 2

position: fixed is the attribute you are looking for!

You can read the docs here