Dropdown button in nav expand the height of the nav when dropdown button clicked. How to solve?

Question

I am using the Laravel framework and want to use Bootstrap to create a dropdown inside a navbar. I would like the dropdown not to expand the height of the navbar when clicked.

image: https://i.sstatic.net/r9uhH.png

I have seen the dropdown and navbar Bootstrap4 documentation and have searched a lot of posts but still can't solve this problem.

<div id="app">
    <nav class="navbar navbar-default navbar-dark bg-dark">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
            </div>
            <div>
                <ul class="nav navbar-nav justify-content-end">
                    @if (Auth::guest())
                        <li class="nav-item"><a href="{{ route('login') }}" class="nav-link">Login</a></li>
                    @else
                        <li>
                            <div class="dropdown show">
                                <a href="#" class="btn btn-secondary dropdown-toggle" role="button"
                                   id="dropdownMenuLink" data-toggle="dropdown"
                                   aria-haspopup="true" aria-expanded="false">
                                    {{ Auth::user()->name }}
                                </a>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                    <a href="{{ route('logout') }}" class="dropdown-item"
                                       onclick="event.preventDefault();document.getElementById('logout-form').submit();">
                                        Logout
                                    </a>
                                    <form id="logout-form" action="{{ route('logout') }}" method="POST"
                                          style="display: none;">
                                        {{ csrf_field() }}
                                    </form>
                                </div>
                            </div>
                        </li>
                    @endif
                </ul>
            </div>
        </div>
    </nav>
    @yield('content')
</div>

I would expect that the navbar won't expand due to the open of dropdown in it.

Answer 1

Replace the navbar-default class with navbar-expand

You may also want to add dropdown-menu-right after dropdown-menu to align the dropdown