I discovered this problem only on Firefox, where the logo in the header shows at the full high resolution size required for retina or 4K screens. So for instance if your regular logo is 150px and you have a 300px logo for high res screens, Firefox will display the larger logo, breaking your menu and ruining your design.
I found out this only happens on certain screen sizes, in my case it was a 1600 x 900px Lenovo laptop. To get around the problem, be sure to set the logo size manually in the Customizer>Header>Logo Retina Logo.
