« Back to main

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 add jquery's 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 e-commerce project?