Why is the site menu moving?

Question

Bootstrap

There is a site menu on the bootstrap

<nav class="navbar navbar-default navbar-fixed-top cost" role="navigation">
        <div class="container">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top"><img class="logo-nav-img" src="images/logo.png"></a>
            </div>
            <div class="collapse navbar-collapse navbar-right navbar-ex1-collapse">
                <ul class="nav navbar-nav men-un">
                    <li class="hidden">
                        <a class="page-scroll" href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">Меню 1</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#partners">Меню 1</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#price">Меню 1</a>
                    </li>
          <li>
                        <a class="page-scroll" href="#evidence">Меню 1</a>
                    </li>
          <li>
                        <a class="page-scroll" href="#contact">Меню 1</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

When the modal window is active, the header is shifted by the width of the scroll, the problem is due to the navbar-fixed-top class.
It works fine in IE 11, because the scroll on top of the site works, but in other browsers it moves. How to solve the problem so that Chrome, Opera, Mozilla browsers do not twitch?