Opencart / Bootstrap大小调整

Question

您好的读者和助手，

开始我的英语不是最好的。我也不知道如何描述这个问题。但我会尽力描述它。

我正在使用具有默认主题的Opencart系统。并在这里和那里编辑了一些。我还使用了包含在opencart 3.x中的bootstrap 3。 对于这种情况：我编辑了导航栏的字体大小。但是，如果将其缩小到移动设备，链接将不会进入下拉菜单，而是相互堆叠。屏幕截图为示例：

如果您仔细观察，您会在紫色条下看到单词。

我已经想到了2个解决方案，但是不知道如何执行它们。

1. 缩小字体大小，这是我不喜欢的。

2. 进行设置，使其在某些时候（当第一个单词进入导航栏时）将自动更改为移动下拉菜单。

问候，

杰西

ps：对于这个模糊的问题，我真的很抱歉。我在这里尽我所能英语。 如果您对我有任何疑问或需要任何东西。让我知道！

代码段：

#menu {
  background-color: #49185E;
  background-image: linear-gradient(to bottom, #49185E, #3f185e);
  background-repeat: repeat-x;
  border-color: #49185E #49185E #49185E;
  min-height: 40px;
  height: 70px;
}

#menu .nav>li>a {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  padding: 25px 20px 10px 15px;
  min-height: 25px;
  background-color: transparent;
  font-size: 15px;
}

#menu .nav>li>a:hover,
#menu .nav>li.open>a {
  background-color: rgba(0, 0, 0, 0.5);
}

#menu .dropdown-menu {
  padding-bottom: 0;
}

#menu .dropdown-inner {
  display: table;
}

#menu .dropdown-inner ul {
  display: table-cell;
}

#menu .dropdown-inner a {
  min-width: 160px;
  display: block;
  padding: 3px 20px;
  clear: both;
  line-height: 20px;
  color: #333333;
  font-size: 15px;
}

#menu .dropdown-inner li a:hover {
  color: #FFFFFF;
}

#menu .see-all {
  display: block;
  margin-top: 0.5em;
  border-top: 1px solid #DDD;
  padding: 3px 20px;
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius: 0 0 4px 4px;
  border-radius: 0 0 3px 3px;
  font-size: 12px;
}

#menu .see-all:hover,
#menu .see-all:focus {
  text-decoration: none;
  color: #ffffff;
  background-color: #49185e;
  background-image: linear-gradient(to bottom, #49185e, #3b154c);
  background-repeat: repeat-x;
}

#menu #category {
  float: left;
  padding-left: 15px;
  font-size: 16px;
  font-weight: 700;
  line-height: 40px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

#menu .btn-navbar {
  font-size: 30px;
  font-stretch: expanded;
  color: #FFF;
  padding: 2px 18px;
  float: right;
  background-color: #49185e;
  background-image: linear-gradient(to bottom, #511a67, #49185e);
  background-repeat: repeat-x;
  border-color: #49185e #49185e #441758;

<nav id="menu" class="navbar">

  <div class="container">
    <div class="navbar-header"><span id="category" class="visible-xs">{{ 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">
        <li>
          <form class="form-inline pull-xs-right">
            <?php echo $cart; ?>
          </form>
        </li>
        {% for category in categories %} {% if category.children %}
        <li class="dropdown"><a href="{{ category.href }}" class="dropdown-toggle" data-toggle="dropdown">{{ category.name }}</a>
          <div class="dropdown-menu">
            <div class="dropdown-inner"> {% for children in category.children|batch(category.children|length / category.column|round(1, 'ceil')) %}
              <ul class="list-unstyled">
                {% for child in children %}
                <li><a href="{{ child.href }}">{{ child.name }}</a></li>
                {% endfor %}
              </ul>
              {% endfor %}</div>
            <a href="{{ category.href }}" class="see-all">{{ text_all }} {{ category.name }}</a>
          </div>

        </li>
        {% else %}
        <li><a href="{{ category.href }}">{{ category.name }}</a></li>
        {% endif %} {% endfor %}

      </ul>
    </div>
  </div>

</nav>

当然还有标准的Bootstrap CSS，即标准的.navbar。