CODEWITHSUNDEEP
cssdrop-down-menutwitter-bootstrap-3scrollable
Tony Mottaz
Tony Mottaz

Reputation: 575

Make a portion of Bootstrap navbar dropdown scrollable

I have a dropdown menu in my Bootstrap navbar that will have a potentially long list of items, so it should be scrollable. At the end of the list I have a separator and an "Add a new item" entry on the list.

I would like to keep this list of items scrollable, but I want the separator and "Add a new item" entry to be fixed at the bottom of the menu. That way, the user can add something without having to scroll all the way to the bottom. In addition, the user could be unaware of that option if the list was too long, since it will be hidden at the bottom.

Here is what I have so far

Upvotes: 0

Views: 3458

Answers (2)

Carol McKay
Carol McKay

Reputation: 2424

scrollable menu with fixed menu item at bottom

html

<body role="document">
    <!-- navbar -->
    <nav class="navbar navbar-inverse navbar-default">
        <div class="container">
            <div class="navbar-header">
                <!-- menu button -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#menu" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- navbar collapse menu -->
            <div id="menu" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            Menu <span class="caret"></span></a>
                        <<div class="scrollable-menu-container">
                        <ul class="dropdown-menu scrollable-menu" role="menu">
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li class="divider" role="separator"></li>
                            <li><div class="separateme">
                                     <a href="#"><span class="glyphicon glyphicon-plus-sign"></span>                                        Add a new item</a>
                                     </div></li>
                        </ul>
                    </li>
                </ul>
                     </div><!-- /scrollable-menu-container -->
            </div>
        </div>
    </nav> <!-- /navbar -->
</body>

css

.scrollable-menu-container {
    display:block;
    height: calc(200px + 30px);/* height of scrollable menu plus line height */
    background:Plum;
}

.scrollable-menu {
            height: auto;
            max-height: 200px;
            overflow-x: hidden;
            overflow-y: scroll;
                background:Pink;
        }

          .separateme {
            position:absolute;
            top:290px;/* push to bottom */
          }

https://jsfiddle.net/cmckay/2v41gnbv/

Upvotes: 0

Shon Levi
Shon Levi

Reputation: 148

You don't need to do "height: auto"

Just make your dropdown li class this css:

max-height: 000px;
overflow-x: hidden;
overflow-y: scroll;

000 = your costum height (200/300/500...)

Upvotes: 0

Related Questions