bootstrap tab not working in bootstrap mega menu -

i'm developing website using bootstrap 1 problem:

in website, have mega menu using yamm3, , mega menu have tabs in cisco site: cisco.com -> menu -> products & services.

everything works perfect 1 thing: design mega menu fixed when scrolling , problem happens @ point. when click on tabs, status of clicked tab become "active" content doesn't show.

here code:

 <!-- menu -->   <div class="row">     <div id="nav">      <nav class="navbar yamm navbar-default">       <div class="container">         <!-- brand , toggle grouped better mobile display -->         <div class="navbar-header">           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">             <span class="sr-only">menubar</span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>           </button>           <a class="navbar-brand" href="#">home</a>         </div>         <!-- collect nav links, forms, , other content toggling -->         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">           <ul class="nav navbar-nav">             <li class="dropdown">               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">menu item 1<span class="caret"></span></a>               <ul class="dropdown-menu" role="menu">                 <li>                   <div class="row">                     <!-- tab panes -->                     <div class="tab-content">                       <div role="tabpanel" class="row tab-pane fade in active" id="home">                           data                       </div>                       <div role="tabpanel" class="row tab-pane fade" id="profile">                             example data                       </div>                       <div role="tabpanel" class="row tab-pane fade" id="messages">                           goes here                       </div>                     </div>                       <!-- nav tabs -->                     <ul class="nav nav-tabs main-menu" role="tablist">                       <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">something</a></li>                       <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">data</a></li>                       <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">اitem</a></li>                     </ul>                   </div>                 </li>               </ul>             </li>           </ul>         </div><!-- /.navbar-collapse -->       </div><!-- /.container-fluid -->     </nav>     </div>   </div><!-- end of menu --> 

and code fixing menu on scrolling using "sticky - jquery plugin":

$('#nav').stickthis({     minscreenwidth:768 }); 

thank in advance.

add element want affix , change data-offset-top height requirement.

data-spy="affix" data-offset-top="100" 

add css , adjust element put above code inside.

nav.affix {     position: fixed;     top: 0;     width: 100%;     z-index: 10; } 

if only want affix applied on mobile viewport css follows.

this rule keeps desktop view becoming affixed.

nav.affix {     position: static; } 

this rule affix navbar based on media rule apply to.

@media (max-width : 768px) {     nav.affix {         position: fixed;         top: 0;         width: 100%;         z-index: 10;     } }