Responsive menu in Metro UI CSS crashes after page refresh. What is the problem?

Question

css

I'm making an appbar using the Metro ui framework.
I add a standard menu to the site, the code is taken from the documentation.
The code:

<div class="app-bar" data-role="appbar">
    <a class="app-bar-element" href="...">Home</a>
    <span class="app-bar-divider"></span>
    <ul class="app-bar-menu">
        <li><a href="">Home</a></li>
        <li><a href="">Support</a></li>
        <li><a href="">Help</a></li>
        <li><a href="">Home</a></li>
        <li><a href="">Support</a></li>
        <li><a href="">Help</a></li>
    </ul>
</div>

When the browser size is reduced, parts of the menu are hidden, it becomes possible to turn around.

However, when the page is refreshed, all blocks are visible

. Once again, updated, they are visible again. However, if you start resizing the browser immediately again, everything falls into place

. What could be the problem?

Answer 1

It turned out that everything was to blame - the use of less in the project, you threw it - it worked