Использование Bootstrap Responsive Framework Я должен использовать две панели навигации на моей странице. они работают нормально, но в режиме переключения нажимают на списки значков, обанав-collapce» Предметы!

Я пытался переименовать имя класса сворачивания для второго класса, но это нет работа. Можете ли вы дать мне знать, как я могу запустить оба "нав-коллапс развалится два раза без конфликтов?

    
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Candete</a>
        
            
            
                <a href="#">Home</a>
                <a href="#">Products</a>
                <a href="#">Contact Us</a>
                <a href="#">About Us</a>
                <a href="#">All Products</a>
            
        
    





    
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Product Category</a>
        
            
            
                <a href="#">Gold</a>
                <a href="#">Copper</a>
                <a href="#">Zinc</a>
                <a href="#">Metals</a>
                <a href="#">Other</a>