+ 2

CSS HEADER POSITION CAUSING PROBLEM

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.

12th Jan 2021, 9:43 PM
CHANDAN ROY
CHANDAN ROY - avatar
11 odpowiedzi
+ 3
I do not understand you, please tell us more
12th Jan 2021, 10:10 PM
Makar Mikhalchenko
Makar Mikhalchenko - avatar
+ 1
Can you please show your attempt? I think that depends on content‘s position, which can to be setted as relative to its container.
12th Jan 2021, 10:22 PM
JaScript
JaScript - avatar
12th Jan 2021, 11:42 PM
Artur
Artur - avatar
+ 1
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.
12th Jan 2021, 11:53 PM
Artur
Artur - avatar
+ 1
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
12th Jan 2021, 11:55 PM
CHANDAN ROY
CHANDAN ROY - avatar
+ 1
CHANDAN ROY I can't open your code. SL reloads for some reason.
12th Jan 2021, 11:58 PM
Artur
Artur - avatar
12th Jan 2021, 11:59 PM
CHANDAN ROY
CHANDAN ROY - avatar
+ 1
Add position property in parent element Then your problem will be solve
13th Jan 2021, 1:44 AM
Sona
Sona - avatar
+ 1
In your CSS delete the header position. #header { position: fixed; }
14th Jan 2021, 10:54 AM
Chris Coder
Chris Coder - avatar
0
You can use 'position: relative' on element next to fixed one, and then adjust 'top' property.
12th Jan 2021, 11:38 PM
Artur
Artur - avatar
0
So you do not want the header to remain at the top?
14th Jan 2021, 10:49 AM
Chris Coder
Chris Coder - avatar