Steps to integrate Yamm mega menu into your own bootstrap website

I am doing website design using bootstrap and a need to use mega menu instead of using list menu items in the navigation bar.

For this purpose I found Yamm mega menu will be useful for my site and followed the below steps for the integration.

1. Download Yamm from http://geedmo.github.io/yamm/

After you download extract the zip file (yamm3-master). The following directories will be exists in the extracted yamm3-master directory.

2. Copy yamm folder and paste it in your website css folder.

3. Include yamm.css in header.html/php file like below

    <link href="css/yamm/yamm.css" rel="stylesheet" type="text/css">

4. Go to yamm directory which you downloaded and open the demo.css from demo directory.

5. Find & copy the below css class and paste it in your website css (yoursite.css) file which is used for your UI Design.

/* menu styes */
.list-unstyled,
.list-unstyled ul { min-width: 120px }

@media ( min-width: 767px ) {
  .panel-group { width: 400px; }
  .thumbnail { margin: 0; }

}

6. Find the navbar css style in header.html/php file and include the yamm class in div tag.

    <!-- Navigation -->
    <nav class="navbar yamm navbar-inverse navbar-fixed-top" role="navigation">

7. Then finally add the mega menu content in menu items like below.

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></b></a>

       

           <ul class="dropdown-menu">

       <li>

    <div class="yamm-content">

                    <div class="row">

                      <ul class="col-sm-4 list-unstyled">

                        <li>

                          <p><strong>Web Designing</strong></p>

                        </li>

                        <li>List Item</li>

                        <li>List Item</li>

                        <li>List Item</li>

                        <li>List Item</li>

                        <li>List Item</li>

                        <li>List Item</li>

                      </ul>

                      <ul class="col-sm-4 list-unstyled">

                        <li>

                          <p><strong>Web Development</strong></p>

                        </li>

                        <li><a href="#"> Link Item </a></li>

                        <li><a href="#"> Link Item </a></li>

                        <li><a href="#"> Link Item </a></li>

                        <li><a href="#"> Link Item </a></li>

                        <li><a href="#"> Link Item </a></li>

                        <li><a href="#"> Link Item </a></li>

                      </ul>

                      <ul class="col-sm-4 list-unstyled">

                        <li>

                          <p><strong>Ecommerce & CMS Solutions</strong></p>

                        </li>

                        <li>List Item</li>

                        <li>List Item</li>

                        <li>List Item</li>

                        <li>List Item</li>

                        <li>List Item</li>

                        <li>List Item</li>

                      </ul>

                </div></div>

</li>

        </ul>

    </li><!-- Services li element-->

                    

I hope this will be helpful for you also to integrate with your website designing.