This is supposed to show no icons in mobile device.

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}

so this "Menu" gotta be hidden, but its showing all these icons still.

<li>
    <a href="menu-categories.html">
        <span ></span><br > Menu
    </a>
</li>

CodePudding user response：

You've added the hidden-xs to the <br> element instead of the span.glyphicon. Change your code to this instead

<li>
    <a href="menu-categories.html">
       <span ></span><br> Menu
    </a>
</li>

CodePudding user response：

You have assigned <br> the target class which will not do anything. Instead add the class to the <span>