Product Landing Page Header Position Fixed Overlap content

HTML-CSS
1

Sticky Header content overlap. about section overlap with sticky header.

Any geek here :wink:
Below is codepen project file :slightly_smiling_face:

https://codepen.io/iffi_nice/pen/RwoNrJY

2

You could give your #emailsubscribe a padding-top of about 200px (little less for the mobile view).

3
  • Avoid position: fixed; whenever you can. Use;
position: sticky;
top: 0;

On a side note, keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)

  • The test script should be included, with all tests passing, when you submit your projects.
1 Like
4

Thanks for ur answer jsdisco but when I applied padding to #emailsubscribe the about, video and pricing link page not work they way I want. Anyhow thanks for your precious time to answer my question. Have a good one :slight_smile:

5

Thanks you very much Roma for your answer, and its really work for me. I really appreciate to your time to putting in FCC forum to solve new coder problem. :slight_smile:

6

Hi Roma,
But still have problem with link page they not going to exact same position at about, video and pricing.

7

Look into / research a property called scroll-padding-top

8

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