Implement a CSS Mega Menu on a Bootstrap 3 website
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi

Please help me implement a CSS Mega Menu on a website using Bootstrap 3

The megamenu should be like http://www.robert-scott.co.uk/ when you mouse-over Product Range link

This is the link to the page with the sample code

Thanks

looks like you already have it implemented on the dropdown tab. do you want the same items that example site linked?
quillford 7 months ago
Hi Quillford, I havent implementd / its not working correctly... Try running it. The mega menu is the huge dropdown sub-menu that appears when you mouseover under Product Range link in the example site.
jobokoth 7 months ago
awarded to mashtullah

Crowdsource coding tasks.

1 Solution

Winning solution

Here is your solution , i have done a sample menu with a wide menu for you, this should be fairly simple to add on any html page.

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" 
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
crossorigin="anonymous">
  <link rel="stylesheet" href="yamm.css">
  <style>
   ul{ list-style:none;}
   </style>
</head>
<body>
       Welcome to Keneville Hygiene Solutions Kenya Ltd

<!-- Main Menu Starts -->
    <div class="container">
            <nav class="navbar navbar-inverse yamm">
              <div class="container-fluid">
                <div class="navbar-header">
                  <a class="navbar-brand" href="#">TestSiteBounty</a>
                </div>
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">About Us</a></li>
                  <li class="dropdown yamm-fullwidth">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Product Range
                    <span class="caret"></span></a>
                    <ul class="dropdown-menu  row">
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">Category 1</li>
                                <li><a href="#">Link 1</a></li>
                                <li><a href="#">Link 2</a></li>
                                <li><a href="#">Link 3</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Sub Category</li>
                                <li><a href="#">Link 5</a></li>
                                <li><a href="#">Link 4</a></li>
                                <li><a href="#">Link 6</a></li>
                                <li><a href="#">Link 7</a></li>
                            </ul>
                        </li>
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">Category 2</li>
                                <li><a href="#">Link 1</a></li>
                                <li><a href="#">Link 2</a></li>
                                <li><a href="#">Link 3</a></li>
                                <li><a href="#">Link 4</a></li>
                                <li><a href="#">Link 5</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Sub Category</li>
                                <li><a href="#">Link 7</a></li>
                            </ul>
                        </li>                                               
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">Category 3</li>
                                <li><a href="#">Link 1</a></li>
                                <li><a href="#">Link 2</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Sub Category</li>
                                <li><a href="#">Link 3</a></li>
                                <li><a href="#">Link 4</a></li>
                                <li><a href="#">Link 5</a></li>
                                <li><a href="#">Link 7</a></li>
                            </ul>
                        </li>
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">Category 4</li>
                                <li><a href="#">Link 1</a></li>
                                <li><a href="#">Link 2</a></li>
                                <li><a href="#">Link 3</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Sub Category</li>
                                <li><a href="#">Link 5</a></li>
                                <li><a href="#">Link 4</a></li>
                                <li><a href="#">Link 6</a></li>
                                <li><a href="#">Link 7</a></li>
                            </ul>
                        </li>
                    </ul>
                  </li>
                  <li><a href="#">Vacancies</a></li>
                  <li><a href="#">Contact Us</a></li>
                  <li><a href="#">News</a></li>
                  <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                      Other Stuff<span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Page 1-1</a></li>
                      <li><a href="#">Page 1-2</a></li>
                      <li><a href="#">Page 1-3</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </nav>
    </div>
<!-- Main Menu Ends -->
<script  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
   crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384- 
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
 crossorigin="anonymous"></script>
 </body>
</html>

Here is a running demo on Gist You can view the working menu and on the top right of the screen you can use the dropdown to navigate to the code and play around with it and view the results... if you break the code, you can reset it to the original code i posted.

Let me know if you have any amendments needed. Cheers Baba!

Hi Mashtullah. It looks quite good on Gist, but on my local code it appears quite bad and not full-width.. What am I missing?
jobokoth 7 months ago
Solved it. Thanks. Was missing yamm.css
jobokoth 7 months ago
@jobokoth, you are welcome, incase you need any clarification, let me know.
mashtullah 7 months ago