Header is not getting fixed position while scrolling

Here I have provided the link of Js fiddle https://jsfiddle.net/orfgrs23/8/

While scrolling the page, the header is also getting scrolling down. But I need header needs to be in fixed position. Please provide me suggestion on this.

Thanks in advance
Boopathy SAsked:
Who is Participating?
 
Ayoub RouziConnect With a Mentor Ceo & CoFounderCommented:
Hello,

To create a fixed top header, use
position:fixed 

Open in new window

and
top:0 

Open in new window

0
 
Boopathy SAuthor Commented:
Hi Ayoub Rouzi. Thanks. I have edited in jsfiddle. Please see the link.

I have used the position

.content-header-row{
  position: fixed;
}

Open in new window


When I use the top: 0; in that. The first row is getting erased. Please see the link on question
0
 
Ayoub RouziCeo & CoFounderCommented:
Yes that is normal, you have to add an empty line or make a <br>
0
 
Boopathy SAuthor Commented:
Hi, Thanks. I need to add empty line in css? If I add the empty line code as like below

.content-header-row{
  position: fixed;
    margin-top: -2em;
  display: block;
 
}

https://jsfiddle.net/orfgrs23/29/

It affecting the above line. Is that I used in correct way? Or I need to change something? Please advice
0
 
Ayoub RouziCeo & CoFounderCommented:
I think that the author used my solution, the last question is another one.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.