CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3
Martavis P.
Martavis P.

Reputation: 1838

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 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

Upvotes: 2

Views: 7046

Answers (1)

Martavis P.
Martavis P.

Reputation: 1838

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.

Upvotes: 6

Related Questions