引导导航栏折叠切换开关显示单条黑线而不是菜单

>我在尝试让我的引导导航栏在折叠时显示菜单项时遇到了一个大问题。我已经搜索了整个网站，但没有找到任何有效的方法。我能找到的所有内容都谈论 jquery 或引导程序版本未正确实现或折叠按钮不可见。通过修补它，我发现问题是我的自定义 css 搞砸了引导 css，但我一生都无法弄清楚要更改什么来修复它。任何帮助将不胜感激。这是我的代码。

.HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <!--Meta -->
  <title>Navbar</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link href='https://fonts.googleapis.com/css?family=Montserrat:700,400' rel='stylesheet' type='text/css'>

  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!--Meta-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <h1 class ="navbar-brand">Navbar</h1>
    </div>
       <div class="collapse navbar-collapse" id ="myNavbar">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#homey">Home</a></li>
        <li><a href="#abou">About</a></li> 
        <li><a href="#porty">Portfolio</a></li> 
         <li><a href="#conty">Contact</a></li> 
      </ul>
      </div>
    </div>
</nav>
  </body>
</html>

.CSS

.navbar {
  height: 125px;
}
.navbar-brand {
  position: relative!important;
  left: 100px!important;
  bottom: 10px!important;
  font-size: 4em!important;
  color: white!important;
  font-family: 'Montserrat', sans-serif;
}
.nav.navbar-nav.navbar-left li a {
  color: white;
  position: relative;
  right: 175px;
  top: 66px;
  font-family: 'Montserrat', serif;
}
.nav.navbar-nav.navbar-left li a:hover {
  color: orange;
}
.navbar-collapse.collapse {
  display: none !important;
}

@media (max-width: 990px) {
  .navbar-header {
    float: none !important;
  }
  .navbar-toggle {
    display: block !important;
  }
  .navbar-collapse.collapse {
    display: none !important;
  }
  .navbar-nav {
    float: none !important;
    margin: 7.5px -15px;
  }
}
@media screen and (max-width: 768px) {
  .navbar-brand {
    font-size: 40px !important;
    position: relative !important;
    top: -20px !important;
    left: -10px !important;
  }
  .navbar {
    height: 70px;
  }
}
@media screen and (max-width: 568px) {
  .navbar-brand {
    font-size: 30px !important;
    position: relative !important;
    bottom: 20px !important;
    left: -3px !important;
    !important;
  }
  .navbar {
    height: 50px;
  }
}
@media screen and (max-width: 420px) {
  .navbar-brand {
    font-size: 25px !important;
  }
}
@media screen and (max-width: 365px) {
  .navbar-brand {
    font-size: 20px !important;
  }
}
@media screen and (max-width: 275px) {
  .navbar-brand {
    font-size: 15px !important;
  }
}

下面是一个代码笔：导航栏

由于您的.nav.navbar-nav.navbar-left li a {}在移动视图中时实际上将其放置在屏幕之外，并且其颜色为白色，因此您将无法看到它。

因此，当您的窗口进入移动尺寸时，我明确删除了您的位置和颜色。另外，请注意我已经注释掉了下面的display:none。这应该可以帮助您重新考虑一下您的 css。在移动视图中，除非您为标签指定不同的 css，否则它将使用您之前指定的 css。尝试将其粘贴到您的上并将其调整为您需要的内容。:)

@media (max-width: 990px) {
  .navbar-header {
    float: none !important;
  }
  .nav.navbar-nav.navbar-left li a {
      color: black;
      right: 0px;
        top: 0px;
    }
  .navbar-nav {
    float: none !important;
    margin: 7.5px -15px;
  }
}

相关内容

最新更新

热门标签：