Is there a way to move the arrow outside of the dropdown menu? I am currently encountering this issue.
https://i.sstatic.net/ozysw.png
I want my layout to look like this, with the arrow positioned similarly to the dropdown menu on Github.
https://i.sstatic.net/6XoLf.png
This is the code for my dropdown menu:
<div class="container">
<div class="row">
<div class="col-md pl-4 user-dropdown">
<div class="dropdown btn-group">
<a class="navbar-brand dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<ul class="dropdown-menu text-center mt-2">
<span><i class="caret-up fas fa-caret-up ml-2"></i></span>
<li>
<a href="{{ route('login') }}">
<button type="button" class="btn btn-warning text-dark">Sign-in now</button>
</a>
</li>
<div class="dropdown-divider"></div>
<li>
<h6>Don't have an account?</h6>
<a href="{{ route('register') }}">Sign-up here</a>
</li>
</ul>
</div>
</div>
<div class="col-md">
<span><a class="navbar-brand" href="#"><i class="fas fa-shopping-cart"></i></a></span>
</div>
<div class="col-md">
<span><a class="navbar-brand" href="#"><i class="fas fa-heart"></i></a></span>
</div>
</div>
</div>