Выпадающее меню в ответном бутстрап-навигаторе

Question

Я использую (отзывчивую) навигационную панель из бутстрапа. Я хотел бы предотвратить появление всплывающего меню, если размер браузера находится в «отзывчивом» -моде (-> меньше, чтобы появился nav-btn).

Проблема: меню занимает много места, когда перечислены подпункты. Я пока не нашел ничего полезного.

Src:

<div class="navbar navbar-fixed-top" align="right" style="border:1px solid #EFEFEF;"> <!-- --> 
    <div class="navbar-inner"> 
    <div class="containerr" align="center"> 
     <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"><font size="+1" color="#FFA500">Menu</font></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 

     </button>  

     <table width="100%" border="0" cellpadding="0" cellspacing="2"> 
     <tr> 
     <td align="left" valign="middle"><a href="http://www.abc.com"> <img alt="" src="img/logo.jpg"/></a></td> 
     <td align="left" valign="middle"><div class="font-effect-3d-float obenrechts">Slogan</div></td> 
     </tr> 
     </table> 

     <div class="nav-collapse"> 

     <ul class="nav"> 

      <li class="active"><a href="home.html" target="mainframe" class="activator">Home</a></li> 
      <li class="divider-vertical"></li> 

      <li class="dropdown" id="iddropdown"> 
      <a href="service.html" class="dropdown-toggle activator" data-hover="dropdown" target="mainframe" id="idservice"> 
      Service </a> 
      <ul class="dropdown-menu"> 
       <li><a target="mainframe" href="service.html#1" class="activator">Option 1</a></li> 
       <li><a target="mainframe" href="service.html#2" class="activator">Option 2</a></li> 
      </ul> 
      </li> 

     </tr> 
     </table> 
     </a></li> 
     </ul> 
     </div><!-- /.nav-collapse --> 
     </div><!-- /.container --> 
    </div><!-- /.navbar-inner --> 
    </div><!-- /.navbar --> 

Answer 1

это работает:

$(window).resize(function() { 

    if ($(window).width() < 980) { 
     $("#iddropdown").removeClass("dropdown"); 
    } 
    else if (!$("#iddropdown").hasClass('dropdown')) 
    { 
     $("#iddropdown").addClass("dropdown"); 
    } 

});