导航栏标题和下拉菜单之间的行

时间：2017-01-26 16:36:10

标签： javascript jquery html css twitter-bootstrap

我的navbar dropdpwm菜单存在一些问题。

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

line between header and dropdown

其次，打开下拉菜单时会略有延迟。看起来li链接会立即出现，然后会出现深灰色背景。因此，短暂的白色字体掩盖了h2标题。

dropdown menu delay 

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

1 个答案:

答案 0 :(得分：1)

以下是“线条”（边框/框阴影）和高度调整的工作示例。可以删除边框或将其更改为与背景颜色匹配（＃333），然后从data = data.sort_values(by=['A','B']) print (data) A B C 0 1 4 string1 2 1 13 string3 1 2 11 string2 3 2 43 string4 中移除box-shadow，以便不再显示这些线条。

对于身高，请保持调整后的navbar-collapse或您需要的任何内容，并移除您应用于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);
  }
}

相关问题
最新问题