How to make a slide out menu in bootstrape in mobile version?

Question

JavaScript

There are two buttons at the top, one displays the main menu on the left

<ul class="nav pull-left notifcation-center visible-xs" id="main-menu-toggle-wrapper">
                    <li class="dropdown">
                        <a id="main-menu-toggle" href="#main-menu">
                            <div class="iconset top-menu-toggle-white"></div>
                        </a>
                    </li>
                </ul>

the second should display the menu user on the right.

<ul class="nav pull-right notifcation-center visible-xs" id="user-menu-toggle-wrapper">
                    <li class="dropdown">
                        <a id="user-menu-toggle" href="#user-menu">
                            <div class="iconset top-home"></div>
                        </a>
                    </li>
                </ul>

further in the code like this
main menu

<div class="page-sidebar" id="main-menu">
            <div class="page-sidebar-wrapper scrollbar-dynamic" id="main-menu-wrapper">
                <?=WidgetMainMenu::widget() ?>
                <div class="clearfix"></div>
            </div>
        </div>

everything works fine, but I do the same for the user menu and it does not plow

<div class="page-sidebar" id="user-menu">
            <div class="page-sidebar-wrapper scrollbar-dynamic" id="user-menu-wrapper">
                <?= UserMenu::widget() ?>
                <div class="clearfix"></div>
            </div>
        </div>

That is, it leaves on the right, but there is a black screen and that's it, how can I place the menu user there?

Answer 1

slick + Center Mode
Set the desired zoom to the Central block or increase the block in px, you can also play around with the distances between the blocks

Answer 2

Z-index check