Second bootstrap navbar links open first (wrong) navbar; jquery

Question

When I click links in my second navbar under "features" section of my site under mobile/minimized window, the second navbar properly closes and references the appropriate content, but then the first one at the top of my site uncollapses. I don't understand how the two navs are related in this way. I'm using bootstrap.

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand page-scroll" href="#page-top">
                <i class="fa fa-rocket"></i>  <span class="light">Start</span> Synergizing
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
            <ul class="nav navbar-nav">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="page-scroll">
                    <a href="#"></a>
                </li>
                <li>
                    <a class="page-scroll" href="#about">About</a>
                </li>
                <li>
                    <a class="page-scroll" href="#features">Features</a>
                </li>
                <li>
                    <a class="page-scroll" href="#download">Download</a>
                </li>
                <li>
                    <a class="page-scroll" href="#team">Team</a>
                </li>                    
        <li>
                    <a class="page-scroll" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

The second nav has same code further down the site but with data-target=".main-nav" and its corresponding div with class="navbar-collapse collapse main-nav." Sorry can't figure out how to post this second code. I don't know much about jquery or bootstrap.js. My site's synergy.atspace.cc Any thoughts appreciated.

Answer 1

Ok, I found the issue for you.

In the file http://synergy.atspace.cc/js/grayscale.js you have this code, which basically says that if you click on the tabs, then it should open up anything with dropdown-toggle class, hence the fact it is opening up the top nav Hope that helps

 // Closes the Responsive Menu on Menu Item Click
    $('.navbar-collapse ul li a').click(function() {
        if ($(this).attr('class') != 'dropdown-toggle active' && $(this).attr('class') != 'dropdown-toggle') {
            $('.navbar-toggle:visible').click();
        }
    });