Bootstrap 4 Dropdown in Navbar

Question

I have put a dropdown menu in a navbar. The problem I am facing is that when I expand the dropdown, the navbar height adjusts to fit the dropdown menu in it. How do I make the dropdown show over the navbar without affecting its height?

Answer 1

Arnesh
You can simply override:

*** in bootstrap.css ***
.navbar-nav .dropdown-menu {
position: static;
float: none;
}

with inline style,
style="
position: absolute;
float: left;
"

Anyways, the original dropdown component is built on popper.js and Dropdown options(data-offset, data-reference) won't be available with this approach.

Answer 2

Thanks piyush singh, I would have done that but I was looking for a Bootstrap solution(I am new to it)..

Answer 3

Mahmud Nabil Thanks a lot!
I solved the problem by creating the dropdown outside the navbar(I only applied bootstrap css) and used popper to position it myself. Anyway, Thanks. :D

Answer 4

Here's your html code

<div id="topbar"> <div id="topbarcentre"> <div class="pagecontrol1"> <div id="showbuildfollowers"> <div class="buildscore"> <ul class="menu-buildpoints"> <li> <a class="buildpointstitle" href="#"> <div class="buildscoretext">3.2k</div> </a> <ul> <li><a href="#">Views: 1372</a></li> <li><a href="#">Followers: 89</a></li> <li><a href="#">Comments: 102</a></li> </ul> </li> </ul> </div> </div> </div> </div>

Answer 5

Here's your css code-

.dropit { list-style: none; padding: 0; margin: 0; } .dropit .dropit-trigger { position: relative; } .dropit .dropit-submenu { position: absolute; top: 100%; left: 0; /* dropdown left or right */ z-index: 1000; display: none; min-width: 150px; list-style: none; padding: 0; margin: 0; } .dropit .dropit-open .dropit-submenu { display: block; } .menu-buildpoints ul { display:none; } .menu-buildpoints ul.dropit-submenu { background-color:#555; border:1px solid #444; -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.15); -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.15); box-shadow:0px 1px 3px rgba(0,0,0,0.15); } .menu-buildpoints ul.dropit-submenu a { display:block; font-size:14px; line-height:25px; color:#fff; padding:0 18px; border-bottom: 1px solid #333; } .menu-buildpoints ul.dropit-submenu a:hover{ color:#fff; text-decoration:none; }

Hope this will make you understand. I have written this code only for you!

Rock the code🤟🤟