Product Landing Page Header Position Fixed Overlap content

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

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

  • 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

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:

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:

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

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