Last dropdown menu - Link sensitive area reduces when navbar stacked - laravel

Question

I have this topbar
<div class="container topbar">
<nav class="navbar navbar-expand-sm ">
{{-- With d-none d-lg-block logo hides on screen smaller than lg
--}}
<div class="col-md-3 d-none d-lg-block">
<div id="contain-logo">
<div id="logo">
<a class="rounded" href="{{ url('/') }}">{{ config('app.name', '') }}</a>
</div>
</div>
</div>
<!-- with ml-auto item align on right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ 'Se connecter' }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ 'Créer un compte' }}</a>
</li>
#endif
#else
#can('isAtLeastPhotoprovider')
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Administration
</a>
<div class="dropdown-menu">
#can('isAtLeastWriter')
<a class="dropdown-item" href="{{ route('posts.index') }}">Articles</a>
#endcan
#can('isAtLeastManager')
<a class="dropdown-item" href="{{ route('infoletter.index') }}">Infoletters</a>
<a class="dropdown-item" href="{{ route('adherent.index') }}">Adhérents</a>
#endcan
#can('isAtLeastPhotoprovider')
<a class="dropdown-item" href="{{ route('filemanager.index') }}">Fournir des
photos(contraint)</a>
#endcan
#can('isAdmin')
<a class="dropdown-item" href="{{ route('upload.index') }}">Fournir des
photos(libre)</a>
#endcan
<a class="dropdown-item" href="{{ route('home') }}">Retour à l'accueil</a>
</div>
</li>
#endcan
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop2" data-toggle="dropdown">
Bienvenue {{ Auth::user()->firstname }} {{ Auth::user()->familyname }} !
#can('isAtLeastPhotoprovider')
{{--Vous avez le rôle
{{ Auth::user()->role }}.--}}
#endcan
</a>
<div class="dropdown-menu ">
<a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ 'Se déconnecter' }}
</a>
</div>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
#csrf
</form>
</li>
#endguest
</ul>
</div>
</div>
</nav>
Hereafter are the changes in css that are in the custom css
.dropdown-menu {
background-color: antiquewhite;
padding: 5px;
}
.dropdown-item {
background-color: #513217;
border-radius: 8px;
color: antiquewhite;
margin-top: 5px;
}
.navbar {
background-color: transparent;
}
.navbar-nav {
background-color: transparent;
}
.nav-link {
color: antiquewhite;
background-color: rgba(110, 98, 89, 1);
border-radius: 5px;
border: 1px solid antiquewhite;
margin-left: 15px;
}
In this top bar there are 2 dropdown menus (Administration and Bienvenue). The trouble appears only when the navbar's dropdown menus become stacked on smaller devices.
The trouble appears only on the last dropdown menu. If Administration is the last it has the trouble and Bienvenue has not. Conversely if Bienvenue is the last it appears only for it.
The trouble is that the area where the mouse pointer has to be to trigger the link reduces to be a very thin strip on the top of the menu item. It is very uncomfortable for the user specially on smart phones.
In addition, the only item in the dropdown menu becomes effectless !
Thank you in advance for any help.

Answer 1

Finally I found that a div was overlapping the menu. Nothing very serious.