javascript - 导航栏标题和下拉菜单之间的线

Question

我的导航栏 dropdpwm 菜单有几个问题。

首先，navbar-header 和下拉菜单之间有一条线。

其次，打开下拉菜单时有轻微的延迟。 li 链接似乎立即出现，然后随后出现深灰色背景。所以有那么一小会儿，白色字体遮住了 h2 标题。

//JS (to close the dropdown when clicking anywhere):
$(document).click(function(e) {
  if (!$(e.target).is('a')) {
    $('.collapse').collapse('hide');
  }
});

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}
body {
  margin-top: 60px;
}
#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.article {
  flex: 1;
}
p {
  line-height: 1.6;
}
footer {
  background-color: #333;
  color: white;
  height: 100px;
  text-align: center;
  padding: 8px;
}
/*START Shrinks the default navbar height*/

.navbar {
  min-height: 30px !important;
  margin: 0px;
  width: 100%;
  background-color: #333;
  height: 44px;
}
.navbar-nav > li,
.navbar-nav > li > a,
.navbar-nav > li > a:link,
.navbar-nav > li > a:visited,
.navbar-nav > li > a:hover {
  padding: 4px 5px 0px 5px !important;
  height: 30px;
  color: white;
  font-size: 1.07em;
  font-weight: 300;
  margin: 2px 8px 0 0;
}
/*END*/

.nav.navbar-nav li a:hover {
  color: white;
  opacity: 0.8;
}
.navbar-toggle {
  float: left;
  border: none;
  margin-top: 7px;
  margin-left: 10px;
  padding: 4px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:active,
.navbar-default .navbar-toggle:focus {
  background-color: #333;
}
/*Displays navbar dropdown on hover */

ul.nav li.dropdown:hover ul.dropdown-menu {
  display: block;
}
.navbar-default .navbar-header .icon-bar {
  background-color: white;
  width: 22px;
}
.navbar-default .navbar-toggle:hover .icon-bar {
  background-color: #EFEFEF;
}
.navbar .navbar-brand {
  color: white;
  margin-top: -4px;
  font-size: 1.7em;
  margin-right: 15px;
  font-family: 'Orbitron', 'Open Sans', sans-serif;
}
.navbar .navbar-brand:hover {
  color: white;
  opacity: 0.8;
}
/*Change hamburger menu to "x" on click */

.navbar-toggle .icon-bar {
  width: 22px;
  transition: all 0.4s;
}
.navbar-toggle .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
  opacity: 0;
}
.navbar-toggle .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
  transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
  opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
  transform: rotate(0);
}
/*Change Background color of toggle dropdown*/

.collapse.navbar-collapse {
  background-color: #333;
}
@media (max-width: 992px) {
  .navbar-nav > li,
  .navbar-nav > li > a,
  .navbar-nav > li > a:link,
  .navbar-nav > li > a:visited,
  .navbar-nav > li > a:hover {
    font-size: 1em;
  }
}
@media (max-width: 767px) {
  .navbar .navbar-brand {
    position: absolute;
    left: 50%;
    margin-left: -100px !important;
    display: block;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="main-wrapper">
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar top-bar"></span>
          <span class="icon-bar middle-bar"></span>
          <span class="icon-bar bottom-bar"></span>
        </button>
        <!--<a href="" class="navbar-brand"><img class="logo" src="../images/eclipse-logo.png"/></a> -->
        <a href="#" class="navbar-brand">Eclipse Music</a>
      </div>
      <!-- end of navbar-header -->

      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <!--<li><a href=""><span class="glyphicon glyphicon-home"></span>Home</a></li>-->
          <li><a href="">Pedals</a>
          </li>
          <li><a href="http://www.eclipsemusic.org/guitars-basses-and-amps">Guitars, Basses and Amps</a>
          </li>
          <li><a href="">Lessons</a>
          </li>
          <li class="dropdown">
            <a href="about/about.html">About Us <span id="addDropup"><b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Directions</a>
              </li>
              <li><a href="#">Contact Us</a>
              </li>
              <li><a href="#">Blog</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- end of collapse navbar-collapse -->

    </div>
    <!-- end of container -->
  </div>
  <!-- end of navbar navbar-default navbar-fixed-top -->

  <div class="article">
    <div class="container">
      <h2>Welcome!</h2>
      <br />
    </div>
  </div>
  <!-- END of article -->
</div>
<!-- END of main-wrapper -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

这是一个调整了“线条”(边框/框阴影)和高度的工作示例。可以删除或更改边框以匹配您的背景颜色 (#333)，并从 navbar-collapse 中删除 box-shadow，这样线条就不再显示了。

对于高度，保持调整后的 min-height: 30px 或任何你需要的高度，并删除你应用到 navbar 的任何固定高度作为填充。然后调整你的a标签line-height和navbar-brand默认height和line-height 因此导航栏使用较小的最小高度。

工作示例:

$(document).click(function(e) {
  if (!$(e.target).is('a')) {
    $('.collapse').collapse('hide');
  }
});

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Orbitron:400,500,700,900');
 html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}
body {
  padding-top: 70px;
}
/*START Shrinks the inverse navbar height*/

.navbar.navbar-inverse {
  background-color: #333;
  border: 1px solid #333;
  min-height: 30px;
  padding: 0;
  margin: 0;
}
.navbar.navbar-inverse .navbar-nav > li > a,
.navbar.navbar-inverse .navbar-nav > li > a:link,
.navbar.navbar-inverse .navbar-nav > li > a:visited,
.navbar.navbar-inverse .navbar-nav > li > a:hover {
  color: white;
  font-size: 1em;
  font-weight: 300;
  font-family: 'Open Sans', sans-serif;
}
.navbar.navbar-inverse .nav.navbar-nav li a:hover {
  color: white;
  opacity: 0.8;
}
.navbar.navbar-inverse .navbar-brand {
  color: #efefef;
  font-size: 1.7em;
  font-family: 'Orbitron', sans-serif;
  line-height: 1px;
  height: auto;
}
.navbar.navbar-inverse .navbar-brand:hover {
  color: white;
  opacity: 0.8;
}
@media (min-width: 768px) {
  .navbar.navbar-inverse ul.nav li.dropdown:hover ul.dropdown-menu {
    display: block;
  }
  .navbar.navbar-inverse .navbar-nav > li,
  .navbar.navbar-inverse .navbar-nav > li > a {
    margin-right: 8px;
    line-height: 1px;
  }
}
@media (max-width: 767px) {
  .navbar-header {
    position: relative;
  }
  .navbar.navbar-inverse .navbar-brand {
    position: absolute;
    width: 250px;
    top: 1.25px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
  .navbar.navbar-inverse .navbar-collapse {
    box-shadow: none;
    border-color: #333;
  }
  .navbar-inverse .navbar-toggle.collapsed,
  .navbar-inverse .navbar-toggle {
    float: none;
    background-color: #333;
    margin: 0;
    border: 1px solid #333;
  }
  .navbar.navbar-inverse .navbar-toggle .icon-bar {
    width: 22px;
    background-color: #efefef;
    -ms-transition: all 400ms;
    -webkit-transition: all 400ms;
    transition: all 400ms;
  }
  .navbar.navbar-inverse .navbar-toggle .top-bar {
    width: 22px;
    -ms-transform: rotate(45deg);
    -ms-transform-origin: 10% 10%;
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: 10% 10%;
    transform: rotate(45deg);
    transform-origin: 10% 10%;
  }
  .navbar.navbar-inverse .navbar-toggle .middle-bar {
    width: 22px;
    opacity: 0;
  }
  .navbar.navbar-inverse .navbar-toggle .bottom-bar {
    width: 22px;
    -ms-transform: rotate(-45deg);
    -ms-transform-origin: 10% 90%;
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: 10% 90%;
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
  }
  .navbar.navbar-inverse .collapsed .top-bar {
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  .navbar.navbar-inverse .collapsed .middle-bar {
    opacity: 1;
  }
  .navbar.navbar-inverse .collapsed .bottom-bar {
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar top-bar"></span>
        <span class="icon-bar middle-bar"></span>
        <span class="icon-bar bottom-bar"></span>
      </button>
      <a class="navbar-brand navbar-brand-centered" href="#">Eclipse Music</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Pedals</a>
        </li>
        <li><a href="#">Guitars, Basses and Amps</a>
        </li>
        <li><a href="#">Lessons</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Directions</a>
            </li>
            <li><a href="#">Contact Us</a>
            </li>
            <li><a href="#">Blog</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

  </div>
</nav>

<div class="container">
  <div class="well">CONTENT</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>