Site Navigation hidden on mobile

Site URL: http://tuckerbryantspeaks.com

Hi! When I hit the dropdown menu that reveals my site's navigation on mobile, the navigation is obscured behind my site's header, so no links are visible.

It seem that once the navigation bar is open, I'm unable to scroll - so if I scroll quite far down before hitting the dropdown, the site navigation links do appear , but if the dropdown is hit from the top of the page, it's not possible to reveal the options.

It seems like the easiest thing may be to make the site navigation menu appear in front of any other elements, but I don't see an option to do this in the mobile editor. Any potential solutions come to mind? Thanks so much!

22 hours ago, tuanphan said:

Your problem is harder than I thought, I checked last night and tried some codes but no luck. I just checked again this morning and came up with this code.

You can use this to Website Tools > Custom CSS

body.header--menu-open #page article>section:first-child {
    opacity: 0;
}
body.header--menu-open header#header img {
    opacity: 0;
}

You will have a result like this

You are phenomenal! Thank you so much for taking the time to help me out here. I really appreciate it!