CODEWITHSUNDEEP
twitter-bootstrapdrop-down-menubootstrap-4
cmccarra
cmccarra

Reputation: 199

Bootstrap dropdown menu expands fixed-top navbar height

I have a fixed-top navbar taken from the dashboard example on the official bootstrap site.

I have added two dropdown menus to the navbar, however when the navbar is expanded it opens up inside the navbar rather than on top of it.

Dropdown closed:

enter image description here

Dropdown opened:

enter image description here

Here is my header code:

<header>
    <nav class="navbar navbar-dark fixed-top d-flex p-0 shadow">
   <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="/">Test</a>
   <ul class="navbar-nav d-flex flex-row px-3 ml-auto">
     <li class="nav-item text-nowrap px-3">
         <a class="nav-link active" href="/reports/individual/users">Reports</a>
     </li>
     <li class="nav-item text-nowrap px-3">
         <a class="nav-link " href="/settings">Settings</a>
     </li>
     <li class="nav-item text-nowrap px-3">
         <a class="nav-link" href="#">Help</a>
     </li>
     <li class="nav-item text-nowrap px-3 dropdown">
        <a class="nav-link" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i data-feather="bell"></i> <span class="badge badge-light px-2">3</span>
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Notification one</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Notification two</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Notification three</a>
        </div></li>
        <li class="nav-item text-nowrap px-3 dropdown">
           <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             User
           </a>
           <div class="dropdown-menu" aria-labelledby="navbarDropdown">
             <a class="dropdown-item" href="#">Your profile</a>
             <a class="dropdown-item" href="#">Sign out</a>
           </div></li>
   </ul>
</nav>
  </header>

I have tried adding the following css which makes the dropdown open on top of the navbar like I want, however it causes other issues such as the dropdown going past the right-hand side screen, so I'm looking for a more elegant solution.

.navbar .dropdown-menu {
position: absolute;
}

Upvotes: 0

Views: 1296

Answers (1)

cmccarra
cmccarra

Reputation: 199

Actually after adding a right and left property to the dropdown-menu class I get exactly what I want:

.navbar .dropdown-menu {
  position: absolute;
  right: 0;
  left: auto;
}

Is this a good solution?

Upvotes: 3

Related Questions