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.

Ok first thing to do, is to fix up the html errors. You about and team section has an additional </div> before you end the section Your features section is missing a </div> before the </section> — AceWebDesign
Thanks, fixed the errors, but no change in the weird uncollapse effect on the top nav. Also, one of the nav links "offline" now pushes out horizontally, which I've shoddily resolved by hiding overflow-x. Main concern is the top nav uncollapsing though. — Usman

AceWebDesign AceWebDesign · Accepted Answer · 2016-04-20T05:23:29

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();
        }
    });

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

1 Answers