Проблема с выпадающим меню Bootstrap

Добрый день. При создании сайта возникла проблема, как я полагаю с js bootstrap. Её суть: На мобильной версии сайта, вместо меню у нас бургер, и меню появляется и исчезает по нажатию на него. Также есть такой элемент, это что-то вроде табов или вкладок:

<ul class="nav nav-tabs main-tab-list text-center" role="tablist">
 <li role="presentation" class="active col-xs-5 col-md-2">
  <a href="#home" role="tab" data-toggle="tab" >
    <div class="single-tab">
      <div class="f-icon">
        <i class="fa fa-laptop"></i>
      </div>
    </div>
    <h4>О компании</h4>
 </a>
</li>
<li role="presentation" class="col-xs-5 col-md-2">
 <a href="#profile" role="tab" data-toggle="tab">
   <div class="single-tab">
     <div class="f-icon">
       <i class="fa fa-truck"></i>
     </div>
   </div>
   <h4>Доставка</h4>
 </a>
</li>
</ul>

Проблема в том, что когда кликаешь по одному из li , открывается главное меню. То есть если я нажму например на "доставка", то у меня откроется меню, как если бы я нажал на бургер. Повторное нажатие по любому li или на бургер скрывает меню. Помогите пожалуйста фиксануть, в bootstrap не силён.

Код бургера:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" id="bugsButton">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

Выпадающее меню:

<nav class="collapse navbar-collapse navigation" id="bs-example-navbar-collapse-1" role="navigation">
  <ul class="nav navbar-nav navbar-right ">
     <li><a href="#portfolio" id="catalog" >Каталог</a> </li>
     <li><a href="#about" id="linkAbout">О нас </a> </li>
     <li><a href="#testimonial"  >Отзывы</a> </li>
     <li><a href="#footer" >Контакты</a> </li>
     <li><a href="#collback_us" >Заказать звонок</a> </li>
  </ul>
</nav>

На десктопе все работает ровно. Большое спасибо за помощь!