I'm currently working on creating a unique custom drop-down menu design. I had an initial idea in mind which looked like this:
https://i.sstatic.net/CFqdi.png
However, the final outcome turned out like this:
https://i.sstatic.net/je21s.png
I'm quite puzzled as to why this happened. I experimented with using columns, but it didn't quite fit in the dropdown. I am desperately searching for a solution. Here is the HTML code snippet, unfortunately, it couldn't work in the snippet view. Apologies for the inconvenience.
<li class="nav-item dropdown icondropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bell-o navbar-icons" aria-hidden="true"></i><span class="badge badge-danger badge-custom">1</span>
</a>
<div class="dropdown-menu dropdown-menu-center z-depth-1 " aria-labelledby="navbarDropdown" style="width: 300px; border-radius: 7px; padding-bottom: 0">
<a class="dropdown-item text-center">
<h5>Inbox</h5><span class="badge badge-danger badge-custom2">1</span></a>
<div class="dropdown-divider m-0"></div>
<a class="dropdown-item dropdown-item-style" href="#">
<img src="img/foto.jpg" class="rounded-circle" width="42">
<p style="color: grey; word-wrap: break-word"><b style="color: grey">Rainier laan</b> heeft gereageert op je bericht.</p>
</a>
<div class="dropdown-divider m-0"></div>
<a class="dropdown-item dropdown-item-style" href="#">
<img src="img/johan.jpg" class="rounded-circle" width="42">
<p style="color: grey; word-wrap: break-word"><b style="color: grey">Johan Strootman</b> heeft je bericht geliked.</p>
</a>
<div class="dropdown-divider m-0"></div>
<a class="dropdown-item dropdown-item-style" href="#">
<img src="img/lil-bub.jpg" class="rounded-circle" width="42">
<p style="color: grey; word-wrap: break-word"><b style="color: grey">Bill Gates</b> heeft gereageert op je bericht.</p>
</a>
<div class="dropdown-divider m-0"></div>
</div>
</li>
I greatly appreciate any assistance provided. Thank you!