Bootstrap导航菜单在Mobile View上不起作用

Question

With the help of some SO users, I was able to get part of my navigation question answered. With putting a "display:none;" tag on my nav ID, the navigation menu collapsed when viewing for mobile.

The new issue is, after doing so I cannot open/close the navigation button in mobile view. I have seen other SO questions explaining missing scripts and not labeling IDs properly. After looking my project over for about a week, I believe I do not have any of these issues.

Can any Bootstrap programmers out there assist me? I believe it has something to do with the "display:none;" tag on the nav ID. Website link: www.thesunkenweb.com/loteksystems and HTML/CSS is below. I think the issue may be lay somewhere within the ".hidden" class on the main.css style page, as well the @767px media query on the responsive.css style page. Both include the "display:none;". Maybe they are eliminating each other? Many thanks!

<!-- Start Header Section -->
<header class="main_menu_sec navbar navbar-default navbar-fixed-top">
<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-12">
            <div class="lft_hd">
                <a href="index.html"><img src="http://www.thesunkenweb.com/loteksystems/img/LotekSystemsLogo_1.png" alt="Lotek Systems"/></a>
            </div>
        </div>          
        <div class="col-lg-9 col-md-9 col-sm-12">
            <div class="rgt_hd">                    
                <div class="main_menu">
                    <nav id="nav_menu">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        </button>   
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="navbar">>
                        <ul>
                            <li><a class="page-scroll" href="index.html">Home</a></li> 
                            <li><a class="page-scroll" href="#abt_sec">About Us<i class="fa fa-angle-down"></i></a>
                                <ul>
                                    <li><a class="page-scroll" href="#tm_sec">Meet Andy</a></li>
                                    <li><a class="page-scroll" href="#tstm_sec">Testimonials</a></li>
                                    <li><a class="page-scroll" href="#clt_sec">Experience</a></li>
                                </ul>
                            </li>                       
                            <li><a class="page-scroll" href="#pr_sec">Services<i class="fa fa-angle-down"></i></a>
                                <ul>
                                    <li><a class="page-scroll" href="CustomCloudManagement.html">Custom Managed Cloud Hosting</a></li>
                                    <li><a class="page-scroll" href="CloudMigration.html">Cloud Migration</a></li>
                                    <li><a class="page-scroll" href="ApplicationManagement.html">Application Management</a></li>
                                    <li><a class="page-scroll" href="ComputerRepairs.html">Computer Repairs</a></li>
                                </ul>
                            </li>
                            <li><a class="page-scroll" href="#ctn_sec">Contact Us</a></li>
                        </ul>
                    </div>      
                    </nav>          
                </div>                          
            </div>
        </div>  
    </div>  
</div>  
 </header>
 <!-- End Header Section -->

Answer 1

On line 74 of responsive.css you have the following code:

@media (max-width: 767px)        
    #navbar {
        display: none;
    }
}

And that is stopping Bootstrap's toggle functionality to show and hide your navigation. If you remove that code the navigation will work correctly.