Как избавиться от дополнительной панели навигации Bootstrap?

Question

Я не просматривал свой код Meteor около трех недель, и когда я запустил свое приложение Meteor этим утром, я быстро заметил что-то очень странное .Теперь у меня есть дополнительная случайная панель навигации Bootstrap под моей предполагаемой панелью навигации Bootstrap.Я не понимаю, как это случилось.

Таким образом, в настоящее время у меня есть две навигационные панели, как показано на рисунке ниже.

Просто чтобы уточнить, один на самомвверху, это предполагаемая панель навигации, а нижеприведенная - случайная.

Где я ошибся, а также как я могу удалить ее внизу?

клиент/main.html

<template name="hello">

<nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>    
      </div>

      <div class="navbar-collapse collapse hiddenNavBar">
        <ul class="nav navbar-nav navbar-left">

                <div class="navbar-brand"> {{pageTitle}} </div>

            <li><a id="makePayment" > <img src="../images/makePaymentWhite.png" style= "width:25px;height:25px;margin-right: 13px;" > Make Payment  </a></li>
            <li><a id="PendingPayments"> <img src="../images/pendingWhite.png" style= "width:25px;height:25px;margin-right: 13px;" > Pending</a></li>
            <li><a id="Notifications" > <img src="../images/notificationsWhite.png" style= "width:25px;height:25px;margin-right: 13px;" > Notifications </a></li>
        </ul>

        <ul class="nav navbar-nav navbar-right"> 
          <li><a id="ShowStatement" > <img src="../images/statementWhite.png" style= "width:25px;height:25px;margin-right: 13px;" > Statement</a></li>
          <li><a id="onlinePresence" > <img src="../images/onlinePresence.png" style= "width:25px;height:25px;margin-right: 13px;" > onlinePresence</a></li>      
          <li><a id="Settings" > <img src="../images/settingWhite.png" style= "width:25px;height:25px;margin-right: 13px;" > Settings</a></li> 
          <li><a id="HelpAndFeedback" > <img src="../images/help&feedback.png" style= "width:25px;height:25px;margin-right: 13px;" > Help and Feedback</a></li> 
          <!-- <li> <a id="SendInvoice"> <span class="glyphicon glyphicon-gift"></span>  Send Invoice</a></li> -->
        </ul>

      </div>
</nav>

</template>

страница моего помощника

client / main.js

Template.hello.helpers({

    'pageTitle': function () {

        var title = "Make Payments To";

    return title;

    },

});

и соответствующий файл CSSраздел:

client / main.css

.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}