Header position and scroll

HTML-CSS
1

I’m a couple hours in and maybe I am just getting lazy…

I have my header position: fixed but when i scroll instead of going underneath the header the scroll goes overtop of it. I am kindah at a loss for the moment .

2

Put a positive z-index on the header.

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

Please post your code when asking for help. Preferably on a site like Codpen so people can test it.

3

Another approach is to add scroll padding to the content to prevent it from being obscured by the fixed header.

4

I don’t think that is what they are saying.

But you are right that using scroll-padding is often needed with fixed headers for the navigation to elements on the same page.

1 Like
5

how do i post and link to codepen?

6

I have gone back to the project, but something is wrong and I dont know how to describe what I see. I will wait for instructions on proper use of codepen and then link

7

[quote=“lasjorg, post:2, topic:656739”]

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

Here is link to the code. please look when you can. I did spend some time trying to figure this out, but i lacked the proper search terms to properly define the problem. Youll see that as you scroll the page, it will transparently roll right over the header instead of going underneath it.

8

Elements are transparent by default if you do not give them a background-color. Give your header a background color if you do not want it to be transparent. Also, it needs to be full width in that case.

9

How to Use CodePen – A Beginner’s Guide (freecodecamp.org)

10

How to Use CodePen (freecodecamp.org)

11

Thank you, that worked of course. But , it is the content that looks transparent rolling over the header? so I am not understanding that.

why does the header need to be 100%? wasnt it already? I see nothing was set for width, but it still spanned the length of viewport and when I plugged in 100% nothing changed.

What do you do professionally? your a Web developer??

12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.