Das Bootstrap-Menü wird vollständig angezeigt, wenn es auf dem Handy angezeigt wird.

Question

Vielen Dank im Voraus! Ich bin ein Grafikdesigner, der mit einer SIMA Bootstrapped Vorlage arbeitet. Ich konnte den Autor der Vorlage nicht kontaktieren. Alles ist koscher, außer wenn Sie die Website auf Mobilgeräten anzeigen, wird das Navigationsmenü vollständig angezeigt. Der Benutzer muss manuell auf die Navigationsregisterkarte klicken, um das Menü auszublenden (schlechte Benutzerfreundlichkeit). Ich habe nach ähnlichen Fragen gesucht und festgestellt, dass ich die richtigen Meta View-Tags habe und meine Navigationsklassen und IDs scheinen alle da zu sein. Der Link zu meiner Website ist bei www.thesunkenweb.com/loteksystems Der Link zu der Website Autoren (die das gleiche Ergebnis hat) ist https://readytheme.net/item/sima-one-page-multipage-template/ HTML Snippet:

<!-- 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 aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          </button> 
         <div 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

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

diese hinzufügen und alles koscher ☺ wäre