Product Landing Page help Position: fixed

1

Hey everyone! Happy holidays…
I just start building my first product landing page ever and I need some help on how to get the header and nav bar fixed on the top as I scroll down the page, I’m new to the web development field and I just start learning CSS 2 weeks ago…
here is my try: https://codepen.io/Otfigo87/pen/YzPQWBe
I will really appreciate any advices from you guys.
Thank you <3

2

Welcome to the forum!

You’ll want to look at the “Position” property. Notice the the fixed method also needs extra properties for locating the element. There is an example here.

https://www.w3schools.com/css/css_positioning.asp

Using fixed will also remove the element from normal document flow, so you will have to figure out how to get everything else aligning correctly.

Happy coding!

3

I tried the fixed method for my header but its messing up everything.Thank you I’ll study from w3chools link you gave me and Ill try again
thanks again :wink:

4

No problem. It’s a little tricky to use especially the first time. If you get stuck post an updated codepen and someone will take a look!

1 Like
5

“Messing everything up”? To me it looks like you just have to push everything else down, which fortunately you have all wrapped up in a div (the container class).

Once you fix that, you may want to look at making the background of the header either opaque, or semi-transparent, to increase readability :slight_smile:

1 Like
6

You can also use position: sticky which will not take the element out of normal flow.

header {
  /* rest of code */
  position: sticky;
  top: 0;
}
2 Likes