Boostrap 4 non collapsible items drop down is expanding the Navbar

bootstrap 4 navbar
bootstrap 4 navbar right align
bootstrap responsive navigation menu
bootstrap 4 navbar template
bootstrap navbar right
bootstrap 3 navbar
vertical navbar bootstrap 4
bootstrap navbar with logo

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

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.

Navbar � Bootstrap, Just add the position-absolute class to dropdown-menu . No extra CSS is needed . <div class="dropdown-menu dropdown-menu-right position-absolute"> . Bootstrap 4 Collapsible Navbar. You can integrate collapse element to the navbar menu that will impart artistic animation of menu being easily open or close on users click. bootstrap navbar collapse on click : Here the whole navbar collapses on click to give way for better UI Experience for mobile users. These menus are now part of online

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

Dropdowns � Bootstrap, For this reason, Bootstrap does not expect (nor automatically add) any of the role and Wrap the dropdown's toggle (your button or link) and the dropdown menu within Dropdowns can be triggered from <a> or <button> elements to better fit your aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" � This is a fixed, high-quality, beautiful navbar template designed by Georgi Demirev. When you scroll down the webpage, the navbar remains fixed on the top. This example has nice menus. When you click on some menu, its background color changes to yellow. Among the menus, there is a drop-down list. When you click it, a list of menus comes up

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>

Bootstrap 4 Navigation Bar, With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. Then add <li> elements with a .nav-item class followed by an <a> element with a .nav-link class: Remove the .navbar-expand-xl|lg|md|sm class to create a vertical navigation bar: Navbars can also hold dropdown menus:� Bootstrap 4 Grid BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples Bootstrap 4 Theme BS4 Basic Template Bootstrap 4 Ref All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Toasts JS Tooltip

Dropdown inside navbar-toggleable-xl expands entire navbar when , twbs / bootstrap Dropdown inside navbar-toggleable-xl expands entire navbar when open #22058. Closed. iatek opened this issue on Feb 23, 2017 � 4 comments <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle " is a non-collapsing navbar, that is always horizontal and doesn't collapse vertically. Move NavBar Items on Right with Bootstrap 4. Since with Bootstrap 4 a lot has changed and many of the functionality will not work the way it used to work with Bootstrap 3. With Bootstrap 3 to move Navbar items on right you had to apply navbar-right class to your ul. Let’s see how you shift navbar items to right with Bootstrap 4

Bootstrap 4 collapse navbar overflow to dropdown on Codeply, Collapse the overflowing extra navbar items into a right side dropdown list. Places the extra items into a dropdown when the navbar becomes to wide and starts to wrap using jQuery. <nav class="navbar navbar-expand navbar-dark bg-info"> When there are no overflowing items, the dropdown menu is hidden. Preview� Check the desktop version of the navbar to get a proper impression of what’s going on. In any case notice that the dropdowns open each time you click on the corresponding parent link. 4. Customizing Dropdowns. Let’s now customize the default behavior of the dropdowns.

How to Make the Bootstrap Navbar Dropdown Work on Hover, Have you ever created a Bootstrap navbar with dropdown menus? Note: This tutorial assumes you have some familiarity with Bootstrap 4. action embedded on this page I've used Bootstrap's responsive expanding classes; the navigation now expands from its mobile .navbar .nav-item:not(:last-child) {. You can also change the color scheme of the navbar by using the .navbar-light for the light background colors, or .navbar-dark for the dark background colors. Then, customize it with the background-color utility classes, such as .bg-dark , .bg-primary , and so on.

Comments
  • What is your question? Do you want it to pop out on top of the navbar instead of expanding the navbar?