CSS media queries - How to get rid of menu rebuilding during page load on mobile devices?

Question

css

Hello.
There is a site on WordPress, my task is to make an adaptive theme for it, for which the template was laid out, and all media queries styles were written. The essence of the problem lies in the display of the menu on mobile devices, the fact is that when the page is loaded, a compressed version of the full menu appears at the beginning, then this menu disappears and a panel appears to call the menu for mobile devices. What needs to be fixed so that the panel for mobile devices immediately appears?
Here is a link to the test domain: testkomok-lawsumdutest.rhcloud.com The
bug can be seen in FireFox by changing the browser width to the smallest size.

Answer 1

When loading the page on mobile, the menu is not hidden by default. After a few seconds, it apparently hides with javascript and displays a mobile menu. Try to hardcode display: hidden in css; and change to display: visible; for wide screens.

Answer 2

Your main styles are located directly in index.php, so they are loaded first along with the page. Actually this is the problem. The advice above won't help. Throw media queries for the menu into the main styles and everything will be fine.

Answer 3

Friends, please take a look at the site at full screen resolution. The menu here, too, "twitches".