Collapse menu color

I have a problem with the bootstrap menu when it is "collapsed". When the screen size is for example a mobile, it has that button to click and open the menu. The problem is that if I leave the <nav> tag with the class navbar-default when the menu is normally open (on a desktop or something big) it gets the color of the navbar-default class. If I remove the class navbar-default when the user's monitor is smaller, then the button does not appear because it does not have a background to appear.

I would like the class navbar-default to be active only (with the background) if the menu is "collapsed". If it is of normal size, then it does not leave stylized. An example is the site www.iped.com.br. When it is in desktop (dimension) then it does not appear the collapsed menu (so far so good), when we leave the browser in a smaller dimension, then the collapsed menu appears in style (light gray background), I would like to do the same. My code:

<div class="col-md-6" id="menu">

              <nav role="navigation" class="navbar navbar-default">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span> 
                  </button>
                </div>

                <div id="menu-collapse" class="collapse navbar-collapse">
                  <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Sobre nós</a></li>
                    <li><a href="#">Produtos</a></li>
                    <li><a href="#">Localização & Contato</a></li>
                    <li><a href="#">Orçamento</a></li>
                  </ul>
                </div>

              </nav>

            </div>