Bootstrap mobile nav bar does not collapse correctly

Question

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed pull-left" 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>
            <a class="navbar-brand" href="#"><img src="<?= Util::res("image/mobile/logo.png") ?>"></a>
            <a class="navbar-brand" href="#"><img class="mobile_lang" src="<?= Util::res("image/mobile/tc.png") ?>"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="text-center navbar_title"><img src="<?= Util::res("image/mobile/bar_home.png") ?>" alt="" style="width:25px;"> <span style="width:16px;">首頁</span></li>
                <li style="display:inline-block;" class="nav_links">
                    <div class="col-xs-3" style="padding-right:0;">
                        <a href="<?= $app->langURL("MT4下載/MT4下載") ?>"><img src="<?= Util::res("image/mobile/nav1.png") ?>" data-hover="<?= Util::res("image/mobile/head1.png") ?>"></a>
                    </div>
                    <div class="col-xs-3" style="padding-left: 7.5px; padding-right: 7.5px;">
                        <a href="<?= $app->langURL("MT4下載/MT4下載") ?>"><img src="<?= Util::res("image/mobile/nav1.png") ?>" data-hover="<?= Util::res("image/mobile/head1.png") ?>"></a>
                    </div>
                    <div class="col-xs-3" style="padding-left: 7.5px; padding-right: 7.5px;">
                        <a href="<?= $app->langURL("MT4下載/MT4下載") ?>"><img src="<?= Util::res("image/mobile/nav2.png") ?>" data-hover="<?= Util::res("image/mobile/head2.png") ?>"></a>
                    </div>
                    <div class="col-xs-3" style="padding-left:0;">
                        <a href="<?= $app->langURL("MT4下載/MT4下載") ?>"><img src="<?= Util::res("image/mobile/nav3.png") ?>" data-hover="<?= Util::res("image/mobile/head3.png") ?>"></a>
                    </div>
                    <div class="col-xs-3" style="padding-right:0;">
                        <a href="<?= $app->langURL("MT4下載/MT4下載") ?>"><img src="<?= Util::res("image/mobile/nav4.png") ?>" data-hover="<?= Util::res("image/mobile/head4.png") ?>"></a>
                    </div>
                    <div class="col-xs-3" style="padding-left: 7.5px; padding-right: 7.5px;">
                        <a href="<?= $app->langURL("MT4下載/MT4下載") ?>"><img src="<?= Util::res("image/mobile/nav5.png") ?>" data-hover="<?= Util::res("image/mobile/head5.png") ?>"></a>
                    </div>
                    <div class="col-xs-3" style="padding-left: 7.5px; padding-right: 7.5px;">
                        <a href="<?= $app->langURL("MT4下載/MT4下載") ?>"><img src="<?= Util::res("image/mobile/nav6.png") ?>" data-hover="<?= Util::res("image/mobile/head6.png") ?>"></a>
                    </div>
                    <div class="col-xs-3" style="padding-left:0;">
                        <a href="<?= $app->langURL("MT4下載/MT4下載") ?>"><img src="<?= Util::res("image/mobile/nav7.png") ?>" data-hover="<?= Util::res("image/mobile/head6.png") ?>"></a>
                    </div>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><?= Lang::name("開戶及交易") ?><span class="caret pull-right" style="position:relative; top:8px;"></span></a>
                    <ul class="dropdown-menu">
                        <li><span>開立帳戶</span></li>
                        <li><?= $footerLink->getHTMLTag("account") ?></li>
                        <li><span>資金存取</span></li>
                        <li><?= $footerLink->getHTMLTag("deposit") ?></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><?= Lang::name("行情中心") ?><span class="caret pull-right" style="position:relative; top:8px;"></span></a>
                    <ul class="dropdown-menu">
                        <li><?= $footerLink->getHTMLTag("gold_review") ?></li>
                        <li><?= $footerLink->getHTMLTag("silver_review") ?></li>
                        <li><?= $footerLink->getHTMLTag("analyst_review") ?></li>
                    </ul>
                </li>
                <li class="text-center"><i class="fa fa-bars" aria-hidden="true" style="color:#fff;"></i></li>
            </ul>
        </div>
    </div>
</nav>

Notice that there is a section does not use the link, and it looks affect the calculation of the nav bar height.

the test link:

http://kotechweb.com/imperial/tc/

Please use mobile to access

How to fix that? Thanks for help.

Answer 1

It's happening because you set a static height to .navbar-collapse

<div class="navbar-collapse collapsing" id="bs-example-navbar-collapse-1" aria-expanded="true" style="height: 420px;">

Remove the style attribute and it should work.