My current task involves obtaining an element in the following format:
https://i.sstatic.net/uhHkL.png
Inside the nav-item, there is a dropdown with a top-centered triangle on it, and the dropdown is positioned at the center.
Below is what I have achieved so far: FIDDLE: Right dropdown design
Although I have centered the dropdown within the parent div, I am still unable to achieve the desired outcome which is:
1. Placing the dropdown above the nav, rather than inside it as it is currently.
2. Aligning the triangle directly above the dropdown, with a white background and border color matching that of the dropdown.
nav.navbar {
padding: 1.1rem 1rem;
background-color: #ffffff;
box-shadow: 0 5px 5px #f1f1f1
}
.custom-button {
height: 34px;
width: 34px;
font-size: 14px;
border-radius: 50%;
color: rgb(162, 197, 252);
border: 1px solid rgb(162, 197, 252);
background-color: Transparent;
}
.dropdown:hover .dropdown-menu {
display: block;
margin: 0 auto;
}
.dropdown {
text-align: center
}
.dropdown-menu {
min-width: 140px;
min-height: 140px;
position: absolute;
}
.dropdown a {
color: rgb(192, 192, 192);
font-size: 12px
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md">
<div class="container">
<a class="navbar-brand" href="#">Testing</a>
<ul class="navbar-nav mr-auto"></ul>
<ul class="navbar-nav" *ngIf="userService.token()">
<li class="nav-item">
<div class="dropdown">
<button class="custom-button">NL</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Classes</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Settings</a>
<a class="dropdown-item" href="#">Logout</a>
</div>
</div>
</li>
</ul>
</div>
</nav>