My content on the webpage is overlapping the navbar.What should I do?

[AKSHRA-DUBE]

In short, I have this portfolio website that I have been working on. It has some of my blogs in a grid and a navbar. I want the navbar to be fixed at the top while scrolling. I have tried every method and I got a step closer to the solution, but the problem is that now when I scroll up, the grid overlaps the navbar.Please help me find the solution.

Here’s the screenshot of the result-

Here is the codepen link.

I have tried every solution I could find but none worked, and I want this project done ASAP.

Thanks in advance!

[DobarBREND]

Give a header selector ‘top’ property set to “0” (after the ‘position’ property is set to ‘fixed’), and add a z-index set to some value greater than 10 (as a new property and value to the ‘header’ selector).