Navbar dropdown item is moved when I click on it - html

Question

I'm trying to set up a navbar that contains several items aligned to the right.
The problem is that when I click on the "notification" icon, I have my dropdown displayed, but my icons move in the navbar instead of staying fixed, I don't understand why
This is my code :
HTML :
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary justify-content-end">
<ul class="navbar-nav menu-right">
<div class="child child-right">
<!-- Parameters item -->
<li class="nav-item">
<a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-cog"></i>
<span class="badge-sonar"></span>
</a>
<div class="dropdown-menu parametres" aria-labelledby="dropdownMenuMessage">
<a class="dropdown-item" href="#">My profile</a>
<a class="dropdown-item" href="#">Help</a>
<a class="dropdown-item" href="#">Setting</a>
</div>
</li>
<!-- Notifications item -->
<li class="nav-item">
<a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bell"></i>
</a>
<div class="dropdown-menu notifications" aria-labelledby="dropdownMenuMessage">
<div class="notifications-header">
<i class="fa fa-bell"></i>
Notifications
</div>
<!-- Notification content -->
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<div class="notification-content">
<div class="icon">
<i class="fas fa-check text-success border border-success"></i>
</div>
<div class="content">
<div class="notification-detail">Lorem ipsum dolor sit amet consectetur adipisicing
elit. In totam explicabo</div>
<div class="notification-time">
6 minutes ago
</div>
</div>
</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-center" href="#">View all notifications</a>
</div>
</li>
</div>
</ul>
</nav>
SASS:
.navbar {
overflow: visible;
height: 56px;
z-index: 9999;
}
.notifications {
max-width: 250px;
margin-left: -200px;
margin-top: 5px;
.dropdown-item {
padding: .25rem 1rem;
}
.notifications-header {
padding: 0 1rem;
}
.notification-content {
display: flex;
.icon {
width: 40px;
height: 40px;
i {
width: 35px;
height: 35px;
text-align: center;
line-height: 35px;
}
}
.content {
line-height: 1.6;
padding-left: 5px;
width: calc(100% - 40px);
.notification-time {
font-size: .7rem;
color: #828282;
}
.notification-detail {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
.child {
display: flex;
flex-flow: row nowrap;
flex-grow: 0;
justify-content: flex-start;
align-items: stretch;
}
.child.child-right {
flex-grow: 1;
justify-content: flex-end;
}
.child>li{
padding-right: 50px;
}
And the jsfiddle : https://jsfiddle.net/kiuega/beat2zmn/11/
Can someone help me please ?

Answer 1

Styles are overridden by navbar.scss like drop-down is of static pos instead of absolute so here is the solution
Add these styles to you style sheet
.child > li {
padding-right: 50px;
position: relative;
}
.navbar-nav .dropdown-menu {
position: absolute;
float: none;
}

Answer 2

check margins and padding(in the child) check with the inspect element and see witch element change his position

Answer 3

If you open the devtools in your browser then you will see these classes on the dropdown panel:
.navbar-nav .dropdown-menu
(overwritten by navbar.scss)
If you remove the 'position: static', then it will work as expected.
And play with the top and left properties to get the right position.