Make Bootstrap 3 Collapsed Menu Overlay Page

I was wondering if it's possible to make a Bootstrap collapsed menu show over the page rather than pushing the page downward? I tried giving a z-index on the menu but with that, I

Solution 1:

This is how I overlaid the collapsed menu. I wrote this to override Bootstrap:

@media screen and (max-width: 768px)
    {
        .collapsing
        {
            position: absolute !important;
            z-index: 20;
            width: 100%;
            top: 50px;
        }
        .collapse.in {
            display: block;
            position: absolute;
            z-index: 20;
            width: 100%;
            top: 50px;
        }
        .navbar-collapse
        {
            max-height: none !important;
        }
    }

I used the media queries because I only wanted to affect the menu in the mobile view.

The class .collapsing is to make sure you are overlaying the page (z-index), stretching across the screen (presumably a phone) and are 50px from the top (the navbar class has a min-height: 50px).

The class .collapse.in is achieving the same as above, but for once the menu has already dropped.

What's under .navbar-collapse is to get rid of the max-height that bootstrap gives to dropdowns. I had a long menu so it may not be of need to others.