How to create mega menu navigation bar with twitter bootstrap 3.0

Most of the e-commerce websites has a mega menu navigation option to represent the user friendly navigation.So today i gonna to  tell how to create mega menu navigation with twitter bootstrap 3.0. For this tutorial i used bootstrap nav bar component for navigation and also written some custom css to representing the mega menu.

Features:

  • Mega menu for categories listing
  • Mega menu for products listing

Both are represented in full width which means

bootstrap-mega-menu-1

bootstrap-mega-menu-2

 

 

HTML:

I have added my navigation bar HTML source.

Custom CSS:

Also i have added my custom css source code here

 

Demo and Download

  • David Leffler

    ‘disabled’ style broken, but fixed by adding space for all .megamenu.disabled to
    .megamenu .disabled in stylesheet

    • azhagupandiyan

      Thanks for your feeback…

  • Peter Krogh

    Great post! Thanks for inspiration!

  • Prenesh

    I cannot download the sample and I have also registered.