Navigation Menu Issue with Firefox on First Load, Refresh Fixes

Hey everyone,

I am a very amateur web designer, who is also very new to CSS, so please be gentle…

I am having a very frustrating issue with Firefox. My website is designed so that when my main menu navigation bar is too long for the screen, it automatically converts into a drop down menu. Naturally, this function is to better serve mobile and tablet devices.

This feature works perfectly on every browser except for Firefox. With Firefox, my main navigation menu bar is converted to drop down menu, even though I am viewing it on a full screened computer, not a tablet or mobile device.

AND, as soon as I refresh the page, it displays just fine. And, as long as I don’t clear my history or cache, it will continue to display just fine.

Not a “huge” deal, but super annoying that new visitors to my site who are using Firefox get this experience as their first experience.

I have studied my CSS code for hours, searched through countless numbers of CSS forums for help, tweaked every bit of code I thought was relevant, and I am completely baffled.

Maybe there is some sort of overstack issue occurring? Maybe not. Who knows – as I say, I am an amateur.

If anyone could look at my code and give me some help, I would be very appreciative.

My website is https://mikerylander.com

Thanks!

PS: This is the first time I’ve not been able to solve a CSS or HTML problem on my own, so hopefully the answer isn’t something ridiculously easy.