Bootstrap导航菜单不适用于移动视图

在一些S.O.的帮助下。用户，我能够得到我的导航问题的一部分回答。随着“显示：无”标记在我的导航ID上时，导航菜单在查看移动设备时会折叠。Bootstrap导航菜单不适用于移动视图

新的问题是，这样做后，我不能打开/关闭移动视图中的导航按钮。我见过其他S.O.解释缺失脚本的问题以及不正确标记ID。看了我的项目约一周后，我相信我没有任何这些问题。

任何Bootstrap程序员都可以帮助我吗？我相信这与“显示：无”有关。标记在导航ID上。网站链接：www.thesunkenweb.com/loteksystems和HTML/CSS如下。我认为这个问题可能位于main.css样式页面的“.hidden”类中，也可能位于responsive.css样式页面上的@ 767px媒体查询。两者都包括“显示：无”。也许他们正在消除对方？非常感谢！

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

来源

2017-07-18 Don

在responsive.css线74，你有下面的代码：

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

，那就是停止引导的切换功能来显示和隐藏您的导航。如果您删除该代码，导航将正常工作。

来源

2017-07-18 23:16:06

谢谢，约瑟夫。删除“display：none;”从媒体查询工作。导航现在打开并关闭，就像它应该。更新Javascript后也有帮助。干杯! – Don

Bootstrap导航菜单不适用于移动视图

回答

相关问题