CSS HEADER POSITION CAUSING PROBLEM

Question

Whenever I change the header position to fixed, as it removes header from normal flow of the page, it makes the content immediately below header, disappear behind it.

How do you solve this problem???

here is codepen link.. though I have it on sololearn as well but for some weird reason, sololearn doesn't load that page on mobile app.

https://codepen.io/croy4744/full/xxEVeej

(i) header becomes problematic when its position is set to fixed
(ii) responsive web design suggestions
(iii) any other suggestions you would like to give.

Answer 1

I do not understand you, please tell us more

Answer 2

Can you please show your attempt?
I think that depends on content‘s position, which can to be setted as relative to its container.

Answer 3

Consider this:

https://code.sololearn.com/WzNJ8BKpQgTa/?ref=app

Answer 4

Or you could use 'padding-top:...' that should work as well. I'm sure there are other tricks to accomplish same result. Depends on what exactly you trying to do.

Answer 5

Artur bro, thanks for your response. Can you have a look at this and then give your valuable comments.

https://codepen.io/croy4744/full/xxEVeej

Answer 6

CHANDAN ROY I can't open your code. SL reloads for some reason.

Answer 7

Artur here is codepen link https://codepen.io/croy4744/full/xxEVeej

Answer 8

Add position property in parent element
Then your problem will be solve

Answer 9

In your CSS delete the header position.

#header {
position: fixed;
}

Answer 10

You can use 'position: relative' on element next to fixed one, and then adjust 'top' property.

Answer 11

So you do not want the header to remain at the top?