Bootstrap 4 dropdown opens in navbar and increases the navbar height - css

Question

I am developing a laravel app. I need two navbars, number Two below number One, one containing logo and logout link, another containing all the links.
I have achieved the look but the dropdown of the logout link is opening in navbar One resulting in increase in the height of the navbar each time the dropdown is toggled.
Images -
Here is my code -
<div id="header-main">
<nav class="navbar navbar-light bg-light" id="header">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
<img src="{{ asset('images/accounts.png') }}" height="50px">
</a>
#auth
<div class="navbar-nav">
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">{{ __('Logout') }}</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
</div>
#endauth
</div>
</nav>
</div>
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item #if(Route::current()->getName() == 'login') active #endif">
<a class="nav-link" href="{{ route('login') }}"><i class="fas fa-sign-in-alt"></i> {{ __('Login') }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item #if(Route::current()->getName() == 'register') active #endif">
<a class="nav-link" href="{{ route('register') }}"><i class="fas fa-user-plus"></i> {{ __('Register') }}</a>
</li>
#endif
#else
<li class="nav-item #if(Route::current()->getName() == 'home') active #endif">
<a class="nav-link" href="{{ route('home') }}"><i class="fas fa-home"></i> {{ __('Home') }}</a>
</li>
#endguest
</ul>
</div>
</div>
</nav>
Somebody help me.

Answer 1

Use position-absolute on the dropdown menu...
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
username<span class="caret"></span>
</a>
<div class="dropdown-menu position-absolute dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}" >Logout</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> #csrf </form>
</div>
</li>
https://codeply.com/p/fHoKygnLv7