Bootstrap: hide links on navbar collapse

Question

I want to make links in my navbar disappear on the navbar's collapse.

I've got two lists of links inside my navbar:

    <div class="collapse navbar-collapse navbar-left">
      <ul class ="nav navbar-nav">
        <li><%= link_to 'Home', '#home' %> </li>
        <li><a href="#food">Food</a></li>
        <li><a href="#drinks">Drinks</a></li>
        <li><a href="#enter">Entertainment</a></li>
      </ul>
    </div>
    <div class="collapse navbar-collapse navbar-right">
      <ul class="nav navbar-nav">
        ...
      </ul>
    </div>

As expected, when my navbar collapses, I get them collapsed into two sections, like this:

(I added an "extra" home link myself, on the collapsed navbar, in some other code.)

What I want, though, is this:

I want the top links (Home, Food, Drinks, Entertainment), to disappear on a navbar collapse. If I remove the "navbar-collapse" class from them, they just (rather ugligly) stay in the navbar. I was thinking about removing them with jQuery (on .navbar-collapse show), but that seems overkill. It's also problematic if the navbar uncollapses again, since then I would have removed the links from the navbar! Any thoughts?

Thanks in advance!

Edit: here's a JSFiddle, with what I have now. Here's a editted JSFiddle with me doing what I want, but with jQuery.

Answer 1

There is a responsive utility class hidden-xs.

http://getbootstrap.com/css/#responsive-utilities

DEMO: http://jsfiddle.net/jnxqpwjc/2/

    <div class="hidden-xs collapse navbar-collapse navbar-left">
      <ul class="nav navbar-nav" id="removeOnCollapse">
        <li><a href="#home">Home</a></li>
        <li><a href="#food">Food</a></li>
        <li><a href="#drinks">Drinks</a></li>
        <li><a href="#enter">Entertainment</a></li>
      </ul>
    </div>