How to make a drop-down menu scrollable

Question

I am trying to build a drop-down menu in a navbar. I have done this, but the list of items is too long to fit on the page (the bottom of the list is hidden) so I therefore need to make the list scrollable. As of now, when the menu is "open" and I scroll, it scrolls the page behind the menu rather than the menu. Please help me figure this out! Below I have posted a bit of my HTML and CSS as it pertains to this drop down menu.

<li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle scrollable-menu" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">INSTRUMENTS</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        {% for instrument in instruments %}
                            <a href="{% url 'instruments:individual_display' instrument.id %}" class="dropdown-item"> {{ instrument.name }} </a>
                        {% endfor %}
                    </div>
                </li>

.scrollable-menu {
    height: auto;
    max-height: 500px;
    overflow-x: hidden;
}

There's a decent solution here: https://stackoverflow.com/questions/23534440/how-to-set-height-for-the-drop-down-of-select-box — Tim Hunter, Jan 09 '19 at 18:40

score 0 · Answer 1 · answered Jan 09 '19 at 18:29

0

Have you tried using overflow-y: auto or overflow-y: scroll yet? Don't have the time to work on an example at the moment, but that should point you in the right direction.

You can find a similar post here for more info.

answered Jan 09 '19 at 18:29

Visual Harmony

107
5

score 0 · Answer 2 · answered Jan 09 '19 at 18:35

0

I think you are missing the correct selector.dropdown-menu is the correct selector if not solved then try overflow:auto; if not solved then try this example

answered Jan 09 '19 at 18:35

Hamaiz Ahmad

39
2

How to make a drop-down menu scrollable

2 Answers2