Bootstrap-Navigation-Menü funktioniert nicht auf Mobile View

Question

Mit Hilfe von einigen S.O. Nutzern konnte ich einen Teil meiner Navigationsfrage beantwortet bekommen. Mit einem "display: none;" Tag auf meiner Navigations-ID, das Navigationsmenü brach bei der Anzeige für Handy ein.

Das neue Problem ist, nachdem ich dies getan habe, kann ich die Navigationsschaltfläche in der mobilen Ansicht nicht öffnen/schließen. Ich habe andere S.O. Fragen, die fehlende Skripte erklären und IDs nicht richtig kennzeichnen. Nachdem ich mein Projekt für ungefähr eine Woche durchgesehen habe, glaube ich, dass ich keine dieser Probleme habe.

Können irgendwelche Bootstrap-Programmierer da draußen mir helfen? Ich glaube, es hat etwas mit dem "display: none" zu tun. Markieren Sie die Navigations-ID. Website-Link: www.thesunkenweb.com/loteksystems und HTML/CSS ist unten. Ich denke, das Problem kann irgendwo in der ".hidden" -Klasse auf der main.css-Stilseite liegen, ebenso wie die @ 767px-Medienabfrage auf der responsive.css-Stilseite. Beide enthalten die "Anzeige: keine;". Vielleicht eliminieren sie sich gegenseitig? Danke vielmals!

<!-- 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

auf der Leitung 74 von responsive.css haben Sie den folgenden Code:

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

Und das Bootstrap der Umschaltfunktion stoppt Ihre Navigation ein- und ausblenden. Wenn Sie diesen Code entfernen, funktioniert die Navigation korrekt.