Thank you for your reply, Tom. I tried your solution but to acheive that, I needed to set the Responsive Breakpoint to very large so regular PC monitor will have that effect. Also, it still cannot move the panel to the top of the page. Is there anything else we can do to adjust the padding or height of the panel itself to make it stick to the top of the page or header block so it covers everything on the top to become a half fullscreen menu?
Here is a screenshot after I tried the mobile menu method: https://imgur.com/a/INDgVHc
I am using gutenberg wordpress default block editor to edit the website by the way.