CSS=> Navigational bar overlapping contents immediately below it.

Question

I have been unable to find the solution of this problem. I asked it earlier on discussion forum as well.

Whenever I make the navigation bar's position fixed at the top of the page, the content immediately below the navbar gets hidden behind it or navbar overlap other content.

I read somewhere that whenever we change the position to fixed, it immediately removes that element from the normal flow of the document.

Why this happens and what's the solution??

https://cdpn.io/croy4744/debug/eYdaQEg/bYAdypGaXmWk

Answer 1

Add media queries for different width

Answer 2

Add padding-top to #welcome-section 160/170px

Answer 3

JOY

Sir, but the height of navbar keeps changing as the width of viewport changes.

How can I apply the correct padding-top in this situation???