Bootstrap navbar with large dropdown
Get 700+ Material components for the latest Bootstrap 5 for free. This component is also available as ready-to-use solution in MDB UI Kit.
Learn more about Bootstrap Dropdown here, or download MDB Free version with 700+ components here.
In this sample we are showing dropdown menu with custom width size. This kind of dropdowns are popular on ecommerce web sites.
Steps to create large dropdown menu for navbar
- We don't need to make all dropdown-menu elements large size. Add your class to that dropdown which you want to make larger. In this case I added
dropdown-large - We will make large size only for desktops. Create media query like
@media all and (min-width: 992px) { ... } - Add any size
.dropdown-large{min-width:500px;} - Don't forget to prevent close when mouse clicks inside the dropdown. Use code
e.stopPropagation();. Because by default bootstrap's dropdown-menu closes when you click on content of menu itself
Here are basic code snippets
Back to all examples