Help with CSS Grid Responsiveness

I am working on the technical document project and have set up the basic structure of my page. I used CSS grid to layout my nav and main content (since that is what my tech document is about). However, I am completely stuck on how to make the nav stack on top of the content when using @media queries for mobile. Do I need to utilize flexbox for this? Here is the repo: technical-doc

@media (max width: 425px) {
.wrapper{
grid-template-columns: 1fr 3fr;
grid-template-areas: 
"navbar"
"main";
}
}

That was actually the first way I tried to run it, but nothing happens…I also went through all of the variations I could think of.

Change nav position to relative.

Ahhhhh after tons of digging I figured out that I needed to change the nav position to inherit inside of the media query.