Back to main
Navbar ecommerce dropdown menu illustration

Bootstrap navbar with large dropdown

View demo Download

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

Creating an e-commerce project?