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 had to make the menu use absolute positioning...bad idea. I want to stick with the route Bootstrap takes, but just make the menu overlay instead of push. Any ideas? Has anyone achieved this?

Thanks

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 had to make the menu use absolute positioning...bad idea. I want to stick with the route Bootstrap takes, but just make the menu overlay instead of push. Any ideas? Has anyone achieved this?

Thanks

• javascript
• jquery
• twitter-bootstrap
• twitter-bootstrap-3

Share Improve this question Follow asked May 1, 2014 at 7:42 Martavis P.Martavis P. 1,83833 gold badges3030 silver badges4949 bronze badges 2

• If you want it to overlay the other elements, you're going to have to use absolute positioning to take it out of the document flow, otherwise it'll just...push the other elements out of the way. – Olly Hodgson Commented May 1, 2014 at 8:05
• Thanks. I am pleting it now. It's actually easier than I thought smh. – Martavis P. Commented May 1, 2014 at 8:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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.