Boostrap 4 non collapsible items drop down is expanding the Navbar

Question

I have followed a snippet from this question Bootstrap 4 - Navbar items outside the collapse which helped me create a couple of none collapsible items for when the viewport shrinks. However I have a drop down menu inside one of these non collapsible items and when this item is exapnded it expands the whole Navbars and does not pop out ontop of it. you can see it in the sample int the link below

http://codeply.com/go/U0GQYJd2JO

navbar code:

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" id="mainNav">
    <a class="navbar-brand" href="/">
        MY Site
    </a>
    <div class="d-flex flex-row order-2 order-lg-3">
        <ul class="navbar-nav flex-row">
            <li style="width:250px;">
                <select data-placeholder="Jump to site..." id="quickjump-menu" class="form-control form-control-chosen">
                    <option value=""></option>
                    <option value="/sites/site/139/">protein</option>
                    <option value="/sites/site/138/">shake</option>
                    <option value="/sites/site/159/">soup</option>
                    <option value="/sites/site/115/">test 1</option>
                    <option value="/sites/site/116/">test 2</option>
                </select>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link p-2 dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                    aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-user fa-lg"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right">
                    <div class="dropdown-header text-center">
                        <strong>Admin</strong>
                    </div>
                    <a class="dropdown-item" href="/admin/" target='_blank'>
                        <i class="fa fa-user fa-fw"></i> Admin
                    </a>
                    <a class="dropdown-item" href="/user_info/">
                        <i class="fa fa-users fa-fw"></i> User Info
                    </a>
                    <div class="dropdown-header text-center">
                        <strong>Settings</strong>
                    </div>
                    <a class="dropdown-item" href="/app_settings/">
                        <i class="fa fa-gears fa-fw"></i> App Settings
                    </a>
                    <div class="dropdown-header text-center">
                        <strong>User</strong>
                    </div>
                    <a class="dropdown-item" href="/edit_profile/1/">
                        <i class="fa fa-user fa-fw"></i> User Profile
                    </a>
                    <a class="dropdown-item" href="/logout/?next=/login">
                        <i class="fa fa-gear fa-fw"></i> Log out
                    </a>
                </div>
            </li>
        </ul>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
            data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav navbar-sidenav" id="menu">
            <li>...</li>
        </ul>
    </div>
</nav>

sample image when the the view port shrinks

What is your question? Do you want it to pop out on top of the navbar instead of expanding the navbar? — Corné, Mar 07 '19 at 13:35

Carol Skelly · Accepted Answer · 2019-03-07T13:50:09.503

Just add the position-absolute class to dropdown-menu. No extra CSS is needed.

<div class="dropdown-menu dropdown-menu-right position-absolute">
   ...
</div>

https://www.codeply.com/go/Q2wqmJnrlB

As you can see on this Bootstrap 4 GitHub issue, the intended behavior of dropdowns inside the "mobile" (once less than the expand-* breakpoint is reach) Navbar is to contain the dropdown inside the Navbar, and not float over it.

To improve the Navbar layout, you may also want to add flex-row flex-nowrap to the navbar-nav so it doesn't stack and make the Navbar too tall.

score 1 · Answer 2 · answered Mar 07 '19 at 13:45

1

You can overcome this issue by overriding the responsive position: static set on the dropdown-menu:

css:

.navbar-expand-lg .navbar-nav .dropdown-menu {
  position: absolute;
}

answered Mar 07 '19 at 13:45

Corné

1,304
3
13
32

score 1 · Answer 3 · answered Mar 07 '19 at 13:46

You need to override bootstrap default css. please check below example

@media (max-width: 991px) {
    .custom-navbar .navbar-nav .dropdown-menu {
        position: absolute;
    }
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light custom-navbar" id="mainNav">
        <a class="navbar-brand" href="/">
            MY Site
        </a>
        <div class="d-flex flex-row order-2 order-lg-3">
            <ul class="navbar-nav flex-row">
                <li style="width:250px;">
                    <select data-placeholder="Jump to site..." id="quickjump-menu" class="form-control form-control-chosen">
                        <option value=""></option>
                        <option value="/sites/site/139/">protein</option>
                        <option value="/sites/site/138/">shake</option>
                        <option value="/sites/site/159/">soup</option>
                        <option value="/sites/site/115/">test 1</option>
                        <option value="/sites/site/116/">test 2</option>
                    </select>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link p-2 dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                        aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-user fa-lg"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <div class="dropdown-header text-center">
                            <strong>Admin</strong>
                        </div>
                        <a class="dropdown-item" href="/admin/" target='_blank'>
                            <i class="fa fa-user fa-fw"></i> Admin
                        </a>
                        <a class="dropdown-item" href="/user_info/">
                            <i class="fa fa-users fa-fw"></i> User Info
                        </a>
                        <div class="dropdown-header text-center">
                            <strong>Settings</strong>
                        </div>
                        <a class="dropdown-item" href="/app_settings/">
                            <i class="fa fa-gears fa-fw"></i> App Settings
                        </a>
                        <div class="dropdown-header text-center">
                            <strong>User</strong>
                        </div>
                        <a class="dropdown-item" href="/edit_profile/1/">
                            <i class="fa fa-user fa-fw"></i> User Profile
                        </a>
                        <a class="dropdown-item" href="/logout/?next=/login">
                            <i class="fa fa-gear fa-fw"></i> Log out
                        </a>
                    </div>
                </li>
            </ul>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav navbar-sidenav" id="menu">
                <li>...</li>
            </ul>
        </div>
    </nav>
</body>
</html>

Boostrap 4 non collapsible items drop down is expanding the Navbar

3 Answers3