Bootstrap菜单栏不会以屏幕分辨率显示＆lt; 768 px

Question

当屏幕尺寸低于某个分辨率时，我无法确定导航栏链接（例如，联系人和主页）没有崩溃的原因并显示菜单按钮（菜单汉堡包）。目前，当屏幕分辨率宽度小于768像素时，导航栏完全消失。

我知道这与CSS中的@media相关，但是，当我创建一个最大宽度为767像素的@media时，导航栏仍然会消失。 Navbar代码如下所示。

任何人都可以提供解决方案来更正此代码，以便我可以保持显示所有屏幕分辨率的徽标，并将导航栏折叠到屏幕分辨率＆lt; 768 px？

Boostrap.CSS

@media (max-width: 767px) {
    nav ul li{
    float: left;
    width: 160px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 180px;
 }
}

Custom.CSS文件

/* Main Menu */
.main-menu {
  padding: 0;
 }
 .menu-style-toggle{}
 .menu-style-toggle nav {
   opacity: 0;
   margin-right: -30px;
   visibility: hidden;
 }
 .menu-style-toggle nav.menu-open {
   opacity: 1;
   margin-right: 0;
   visibility: visible;
 }
 .main-menu nav {
   float: left;
   -webkit-transition: all 0.3s ease 0s;
   transition: all 0.3s ease 0s;
 }
 .main-menu nav > ul{}
 .main-menu nav > ul li {
 position: relative;
 }
 .main-menu nav > ul > li {
    display: block;
    float: left;
    padding: 32px 0;
 }
 .stick .main-menu nav > ul > li {
    padding: 23px 0;
 }
 .main-menu nav > ul > li + li {
   margin-left: 44px;
 }
 .main-menu nav > ul > li > a {
  color: #ffffff;
  display: block;
  font-size: 14px;
  line-height: 23px;
  position: relative;
  text-transform: uppercase;
 }
 .main-menu nav > ul > li > a i {
   display: block;
   float: right;
   line-height: 23px;
   margin-left: 3px;
 }
 .main-menu nav > ul > li.active > a {
   color: #dec839;
 }
 .main-menu nav > ul > li > a::before, .main-menu nav > ul > li > a::after {
   background-color: #fff;
   border-radius: 50%;
   content: "";
   height: 1px;
   opacity: 0;
   position: absolute;
   width: 100%;
 }
 .main-menu nav > ul > li > a::before {
   left: 0;
   top: 0;
 }
 .main-menu nav > ul > li > a::after {
   bottom: 0;
   right: 0;
 }
 .main-menu nav > ul > li:hover > a::before, .main-menu nav > ul > li:hover > 
   a::after {
   width: 15px;
   opacity: 1;
 }
 .main-menu nav > ul > li.active > a::before, .main-menu nav > ul > li.active > a::after {
    background-color: #dec839;
    width: 15px;
    opacity: 1;
 }

HTML

 <div class="header-bottom sticky">
   <div class="container">  
      <div class="row"> 
      <!-- Header Bottom -->
        <div class="col-xs-12">
          <div class="navbar-header">
          <a href="/" class="logo navbar-brand"><img id="logo_img" src="img/gallery/logo-200.png" alt="logo" /></a>
          </div>
          <div class="main-menu float-right">
          <nav>
               <ul>
                   <li class="steadyState"><a href="/">contact</a></li>
                   <li class="steadyState"><a href="/about">about</a></li>
              </ul>
          </nav>
          </div>
      </div>
   </div>
 </div>