user6106183 user6106183 - 5 months ago 23
CSS Question

CSS navbar image issue

I was just doing some tests with my navbar and when I wanted to put an image right before username, this happend. I don't really know what is the problem, I usually do server-side scripting but not these design. This active class on dropdown menu, as planned, needed to be together with the image, but actually it's only going to the half. If someone can give me example of what things I could put on my CSS file because there lies the problem.
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>

Answer

Try

.dropdown, .dropdown-toggle, .dropdown-menu {
    position: inline-block;
}

.dropdown-toggle, .dropdown-menu {
    float: right;
}

.navbar-image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}