Bootstrap Collapse on small "Sm" devices

Question

I have a somewhat problematic menu. As I have some categories in the menu as the screen decreases it bulges and descends a new menu below.

Then I realized that my bootstrap only collapses on the "Xs" devices. What I need to leave collapsing in the Sm?

My code:

<section id="navbar-top">
 <div class="container">
  <div class="row">
   <div class="col-sm-10 navs-top">
    <?php if ($categories) { ?>
        <nav id="menu" class="navbar">
          <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
            <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
          </div>
          <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">

              <?php foreach ($categories as $category) { ?>
              <?php if ($category['children']) { ?>
              <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
                <div class="dropdown-menu">
                  <div class="dropdown-inner">
                    <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
                    <ul class="list-unstyled">
                      <?php foreach ($children as $child) { ?>
                      <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
                      <?php } ?>
                    </ul>
                    <?php } ?>
                  </div>
                  <a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
              </li>
              <?php } else { ?>
              <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
              <?php } ?>
              <?php } ?>
            </ul>
          </div>
        </nav>
    <?php } ?>
  </div>
  <div class="col-sm-2 brands-top">
    <button id="button-brands" class="btn-brands"><?php echo $home_brands; ?></button>
    <div id="group-brands">
      <?php if ($brands) { ?>
        <?php foreach ($brands as $brand) { ?>
            <h2 id="<?php echo $brand['name']; ?>"><?php echo $brand['name']; ?></h2>
            <?php if ($brand['manufacturer']) { ?>
              <div class="list-group">
                <?php foreach ($brand['manufacturer'] as $manufacturer) { ?>
                  <div>
                    <a class="list-group-item" href="<?php echo $manufacturer['href']; ?>"><?php echo $manufacturer['name']; ?></a>
                  </div>
                <?php } ?>
              </div>
            <?php } ?>
        <?php } ?>
      <?php } ?>
    </div>
  </div>
</div>

Answer 1

The solution to this problem has already been answered in Stackoverflow in English. Here is an excerpt from the CSS in English: Link

@media(max-width:768px) {
  .navbar-header {
    float: none;
  }
  .navbar-left,
  .navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .collapse.in {
    display: block !important;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>