jquery - Unable to hide very long menu items due to Bootstrap Code -

i'm trying make menu items dissapear before shifting second row, , making 3 bar menu pop menu items dissapear resize browser. http://jsfiddle.net/qwwru7eh/

so far have tried style them media queries using display none , display:block inline css style tags:
i isolated issues bootstrap following code, cant desired effect styling it:

@media (min-width: 872px) { .navbar-toggle { display: none; } }

@media (max-width: 871px) { .navbar-nav .open .dropdown-menu { position: static; float: none; display:none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; } .navbar-nav .open .dropdown-menu > li > { line-height: 20px; } .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus { background-image: none; } }

html:

<nav class="container-fluid navbar navbar-inverse navbar-static-top">          <div class="container-fluid">              <!--logo!-->             <div class="navbar-header">                 <a href="#" class="navbar-brand">the logo</a>               <!--toggle button 3 lines -->                                      <button type="button" class="navbar-toggle customtogglebtn" data-toggle="collapse" data-target="#mainnavbar">                <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>                </button>              </div>              <!--navigation menu items!-->             <div class="collapse navbar-collapse" id="mainnavbar">                 <ul class="nav navbar-nav">                      <li class="active"><a href="#">home</a></li>                     <li><a href="#">about</a></li>                     <li><a href="#">menu</a></li>                     <li><a href="#">download</a></li>                     <li><a href="#">team</a></li>                     <li><a href="#">timeline</a></li>                     <li><a href="#">contact</a></li>                   <!--dropdown menu item options!-->                        <li class="dropdown">                          <a href="dropdown" class="dropdown-toggle" data-toggle="dropdown">my profile<span class="caret"></span></a>                         <ul class="dropdown-menu">                             <li><a href="#">friends</a></li>                             <li><a href="#">settings</a></li>                             <li><a href="#">downloads</a></li>                             <li><a href="#">notifications</a></li>                             <li><a href="#">my timeline</a></li>                             <li><a href="#">log out</a></li>                         </ul>                     </li>                  </ul>                  <!--right-align menu items!-->                 <ul class="nav navbar-nav navbar-right">                     <li><a href="#">logout</a></li>                 </ul>              </div>                       </div>     </nav>              <!--page content -->       <div class="container-fluid belowstatic" style="height:1000px; background:#333; bottom:0;"> 

static navigationbar

css:

        body { padding-top: 51px;}          .navbar-toggle { outline:none; border:none; margin-right:-5px; background:none;}          .navbar-static-top {   top: 0;   position: fixed;   left: 0;   right: 0;   margin: 0 auto;   z-index: 1;  } 

if knows best way style bootstrap menu items elements, please let me know how it, , advise me on best practice styling bootstrap elements. thank you!

you have couple options, first 1 decrease padding around menu items media query:

@media (min-width: 768px) {   .navbar-nav>li>a {       padding:15px 10px;   } } 

jsfiddle example

another option, if don't want change padding, decrease font size:

body {    padding-top: 51px;   font-size:13px; } 

jsfiddle example