As I was experimenting with my navbar, I encountered an issue when trying to add an image right before the username. This is not something I usually deal with as I focus more on server-side scripting than design aspects. The active class on the dropdown menu was supposed to be displayed alongside the image, but it only goes halfway. If anyone could provide me with some examples of what I can include in my CSS file to address this problem, I would greatly appreciate it. Here is the image
.navbar-image {
width: 32px;
height: 32px;
position: absolute;
top: 10px;
left: -19px;
border-radius: 50%;
}
.nav-img {
position: relative;
padding-left: 50px;
}
<li class="dropdown">
<a href="#" class="dropdown-toggle nav-img" data-toggle="dropdown" role="button" aria-expanded="false">
<img src="/uploads/avatars/{{ Auth::user()->avatar }}" class='navbar-image'>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="/posts"><i class='fa fa-btn fa-sticky-note'></i>Posts</a></li>
<li><a href="/profile"><i class='fa fa-btn fa-user'></i>Profile</a></li>
<li role="separator" class="divider"></li>
<li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Log out</a></li>
</ul>
</li>