Fixed navbar for mobile problem

I followed this to create my navbar and make it responsive. Then using this video tutorial, I added the sticky nav on scroll feature to it.

However, in mobile view , i want to remove the sticky nav on scroll feature and just make it sticky. to illustrate this , check this template website in mobile view. That is the change I want to implement.

I kind of managed to replicate my project code in codepen. this is the link. But it is not perfect so please bear with me. Thank you in advance

@vicrost, add css position:sticky; top:0 for nav , and change color in the media query for a , or, remove background from the media query

You can also reset the colors wherever necessary to see the effect.

Hope, this will help you.

thank you. I’ve managed to remove the on scroll effect for the nav and it remains on the top of the screen. However, if i scroll down and click on the hamburger menu, it takes me back to the top of the page before showing the nav elements instead of just showing them in the section i was in. Is there a way to fix this?