Navbar does not collapse when zoomed

I am using bootstrap and trying to make navbar to collapse when the browser zoomed. The navbar is displaying when zoomed but cannot display the contents !. What went wrong here? How to enable navbar to collapse and show its contents?

 <div class="navbar navbar-inverse navbar-fixed-top" style="height:70px"> <%--change header div size--%>
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" style="background-color:black" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
               <img src="/pic/photoHeader.jpg" height="60" />
            </div>

            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a runat="server" href="~/">Home</a></li>
                    <li><a runat="server" href="~/About">About Company</a></li>
                    <li id="businessU">
                        <a href="#">Business Units  </a>
                        <ul class="sub-menu">
                            <li><a runat="server" href="~/BusinessUnits/Engineering">Solution Engineering Sdn Bhd</a></li>
                            <li><a runat="server" href="~/BusinessUnits/Bioforce">Solution Bioforce Sdn Bhd </a></li>
                            <li><a runat="server" href="~/BusinessUnits/Biogen">Solution Biogen Sdn Bhd</a></li>
                            <li><a runat="server" href="~/BusinessUnits/AC">Solution A&C Technology Sdn Bhd</a></li>

                        </ul>
                    </li>
                    <li id="Investor">
                        <a href="#">Investor Relations</a>
                        <ul class="sub-menu2">
                            <li><a runat="server" href="~/InvestorRelation/Directors">Directors</a></li>
                            <li><a runat="server" href="~/InvestorRelation/CorporateStructure">Corporate Structure </a></li>
                            <li><a runat="server" href="~/InvestorRelation/News">News</a></li>
                            <li><a runat="server" href="~/InvestorRelation/Events">Events</a></li>
                            <li><a runat="server" href="~/InvestorRelation/Anno">Announcements</a></li>

                        </ul>
                    </li>
                    <li id="contact">
                        <a runat="server" href="#">Contact Us</a>
                        <ul class="sub-menu3">
                          <li><a runat="server" href="~/Contact/Contact">Contact</a></li>
                            <li><a runat="server" href="~/Contact/Whist">Whistleblowing</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><asp:LinkButton ID="login1" runat="server" PostBackUrl="~/Login.aspx">Admin Login</asp:LinkButton> </li>
                    <li> <asp:LinkButton ID="Logout" runat="server" CausesValidation="False" onclick="Logout_Click" style="text-align: right">(logout)</asp:LinkButton></li>

               </ul>
            </div>
        </div>
    </div>

via Chebli Mohamed