I can't assign display:none to a toggle button
<p>I am creating a website which menu is toggleable. but when I am on widescreen the menu is always displayed. I want it to display only when I click the button.</p>

<p>in the html, this is the button:</p>

<pre><code>&lt;div class="botonera col-xs-12"&gt;
    &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" id="botonMenu"&gt;
       &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
       &lt;span class="icon-bar"&gt;&lt;/span&gt;
       &lt;span class="icon-bar"&gt;&lt;/span&gt;
       &lt;span class="icon-bar"&gt;&lt;/span&gt;
    &lt;/button&gt;
&lt;/div&gt;
&lt;div id="navbar" class="navbar-collapse collapse"&gt;
    &lt;ul class="nav navbar-nav"&gt;
        &lt;li&gt;&lt;a href="#productos"&gt;&lt;img class="iconoMenu" src="imagen/iconoMenuProductos.png"&gt;Productos&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#contacto"&gt;&lt;img class="iconoMenu" src="imagen/iconoMenuContacto.png"&gt;Contacto&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#distribuidores"&gt;&lt;img class="iconoMenu" src="imagen/iconoMenuDistribuidores.png"&gt;Distribuidores&lt;/a&gt;&lt;/li&gt;  
        &lt;li&gt;&lt;a href="#cotizacion"&gt;&lt;img class="iconoMenu" src="imagen/iconoMenuCotizacion.png"&gt;Cotizacion&lt;/a&gt;&lt;/li&gt;                     
        &lt;li&gt;&lt;a href="#descargas"&gt;&lt;img class="iconoMenu" src="imagen/iconoMenuDemos.png"&gt;Descargas&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#videos"&gt;&lt;img class="iconoMenu" src="imagen/iconoMenuVideos.png"&gt;Videos&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#nosotros"&gt;&lt;img class="iconoMenu" src="imagen/iconoMenuNosotros.png"&gt;Nosotros&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#faq"&gt;&lt;img class="iconoMenu" src="imagen/iconoMenuFaq.png"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>and this is the css:</p>

<pre><code>.navbar-toggle 
{
    display: block !important;
}
.navbar-collapse.collapse 
{
    display: none !important;
}
.navbar-nav&gt;li 
{
    float: none !important;
}
.collapse.in
{
  display:block !important;
}
</code></pre>

<p>so the problem is i am writing:</p>

<pre><code>.navbar-collapse.collapse 
{
   display: none !important;
}
</code></pre>

<p>but it's not taking it. I am working with bootstrap too. and I think something about it is blocking it. how do I force the menu to be collapsed if it isn't taking the display: none </p>