I am currently working on setting up a navigation bar with multiple items aligned to the right side. However, I have encountered an issue where clicking on the "notification" icon causes the other icons in the navbar to move instead of remaining fixed in place.
Here is the code snippet that I am using:
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;
}
To view the problem and provide assistance, you can check out the jsfiddle link here: https://jsfiddle.net/kiuega/beat2zmn/11/