Navbar issue in Edge and Internet Explorer and Mozilla

I’m having an issue with the Navbar in IE and Edge Mozilla, but this issue is not present in Chrome or Safari. Issue: Transparent navigation area at the top of the screen, using the “hamburger” menu icon for all browsers. In Chrome and Safari, it’s transparent over the background video. In IE, Edge, and Mozilla, it shows with a solid gray background. Can you help me figure out what I’m doing wrong?

Please let me know if there’s a different category I should post in. Thanks in advance for your help. I put the read-only link below.

Here is my site Read-Only:

(how to share your site Read-Only link)

In the version from the original post, I had the Navbar “overflow” set to Visible. In the version linked below (alternate), it’s set to “Scroll”. If I change to Scroll, then all browsers look the same. However, it adds white areas around the Navbar, and makes you have to scroll through the menu (bad).

Is there a way to get either one of these to work in all browsers?

Read-only Link:

Thanks as always for your help!

I’ve attached a few screen shots to help illustrate the problem, for anyone who can’t test in IE, Firefox, or Edge. Any ideas?

Here’s navbar in Chrome and Safari (looks the same):

And here’s the same page in Firefox (looks same in IE). I don’t have Edge but it was reported by a co-worker as like this:

Anyone have any ideas?

Thanks in advance for your help!

I figured it out. I needed to set the navigation menu to be either fixed or absolute. Works fine now.