CODEWITHSUNDEEP
htmlcsstwitter-bootstrapdrop-down-menuoverflow
Suhaib Ahmad
Suhaib Ahmad

Reputation: 526

How to show navbar dropdown menu outside container?

So before this problem, I was struggling to make the navbar scroll on smaller screens when expanded. SO link: responsive fixed-top navbar when expanded fills up screen, hides some of the nav-links, and does not scroll

Using the answer in that question, I was able to make the navbar scroll but I was then faced with a new issue. When clicked on the navbar link, the dropdown menu that popped up would stay within the navbar container, and the navbar could be scrolled.

A picture to explain (OLE dropdown in this case): enter image description here

This is the CSS used to make the collapsed navbar scrollable.

.fixed-top .navbar-collapse {
    max-height: calc(100vh - 4.5em);
    overflow-y: auto;
}

There is no problem when navbar collapsed and it can show the dropdown menu fine and scroll. But, when not collapsed on larger screen, how do i make the dropdown menu show outside the navbar container?

Here's my JSFiddle for this problem: https://jsfiddle.net/suhaib47/7b58o0d3/3/
Note: make the result viewport wide enough that navbar can be fully displayed. Click on the OLE dropdown, and you will have to scroll down to see the dropdown menu.

When I show the dropdown menu outside the container, the menu cannot be scrolled on smaller screens. When the menu CAN be scrolled, I cannot get the dropdown menu to show outside the nav container.

How do I make the dropdown menu show outside the navbar container? At the same time I'd like the responsive navbar to be scrollable when expanded on smaller screens.

I found a similar SO question but could not get it to fix my problem: The navbar dropdown menu does not beyond the container

Upvotes: 0

Views: 1387

Answers (1)

Suhaib Ahmad
Suhaib Ahmad

Reputation: 526

Hoped there would be a solution to this without having to use media queries. Nevertheless, I was indeed able to fix this using media query.

@media only screen and (max-height: 450px) {
    .fixed-top .navbar-collapse {
        max-height: calc(100vh - 4.5em);
        overflow-y: auto;
    }
}

This way scrolling is available when needed, depending on the display size/orientation, i.e. when the navbar menu is collapsed.

Upvotes: 1

Related Questions