Как убрать заголовок отдельного выпадающего в начальной загрузке, когда он меняется на кнопку для мобильного

Question

У меня есть простая навигационная панель с логотипом слева и словом Меню справа, которые действуют как выпадающий список. Для маленьких экранов мне нужно изменить формулировку меню на иконку бургера. Пока я могу изменить его на значок, но список все еще содержит меню слова, и это все еще выпадающий список. Как сделать так, чтобы список содержал только элементы раскрывающегося списка, а не сам раскрывающийся список?

<div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <div class="logo pull-left animated wow fadeInLeft"><a class="navbar-brand" href="index.html"><img src="LOGO" alt="" title=""></a></div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
  <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </li>
</ul>