Bootstrap 4 Dropdown in Navbar | Sololearn: Learn to code for FREE!


Bootstrap 4 Dropdown in Navbar

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?

5/28/2020 2:54:28 PM


5 Answers

New Answer


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.


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


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


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>


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🤟🤟