CODEWITHSUNDEEP
htmlcssdrop-down-menubootstrap-4
Alok
Alok

Reputation: 8988

Customization of Dropdown Menu in the <div>

My task is to get the element like this :

Goal to be achieved

There is a dropdown inside the nav-item and the menu has the top-centered triangle onto it and the dropdown is at the centre.

This is my attempt so far : FIDDLE: Right dropdown design

I have positioned the dropdown in the centre to the parent div but I'm still unable to get the desired result that is :

1. To get the dropdown above the nav not inside the nav which is coming right now.

2. To get the triangle right above the dropdown which is not yet aligned and with the background as white and border color as same as 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>

Upvotes: 0

Views: 982

Answers (1)

Bhuwan
Bhuwan

Reputation: 16855

If you want to show your dropdown on hover, you will need to do some fix with css..

Use transform to center your dropdown. Also you have used wrong markup for the dropdown according to bootstrap4 navbar dropdown documentation..

Reference Link: Bootstrap4 Navbar Dropdown

I have changed it the updated fiddle.

Updated Fiddle

Upvotes: 2

Related Questions