移动导航栏问题

Question

编辑 #1：在我将高度定义为 89px 后，我的移动菜单似乎位于我的内容后面。

我的移动版本导航栏出现问题。导航栏不像徽标那么高，因此当我单击它时，除非将鼠标悬停在它上面，否则不会显示我的“主页”菜单项。

以下是两期的图片：

这是我的 HTML：

<nav class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
        <div class="row">
            <div class="navbar-header">
              <a class="navbar-brand " style="margin-top: -15px; float: left;" href="#">
                <img alt="Brand" class="pull-left" style="margin-left: -15px;" src="Images/logo-resized.png">
              </a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
            </button>
            </div>
            <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Internet</a></li>
                    <li><a href="#">Phone</a></li>
                    <li><a href="#">Android TV</a></li>
                    <li><a href="#">Shaw Direct</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div> 
        </div> 
    </div>
</nav>

这是我的 CSS：

.navbar-default {
    background-color: #00AEFE;
}

.nav.navbar-nav li a{
    color: white;
    font-size: 18px;
    line-height: 50px;
}
.col-xs-0 {
    display: none;
}
nav {
    height: 89px;
}

Answer 1

在Bootstrap中，

navbar-brand

有一些填充，

height

的

<img>

也应该由额外的CSS控制，如

navbar-brand img {height:40px}

。

如果我们能看到您的实时 HTML，那就太好了。

已编辑

使用此 CSS 提供比图像高度更长的高度，例如 100 像素或更高

@media (min-width: 768px) {
  .navbar-header {
     height: 100px;
  }
}

或 如果您不想更改

navbar-header

的高度，您可以向

navbar-toggle

按钮添加一些填充，这样它就会添加

navbar-header

的高度：

@media (min-width: 768px) { 
  .navbar-toggle {
     padding: 33px 10px;
  }
}

Answer 2

<a class="navbar-brand " style="margin-top: -15px; float: left;height:auto" href="#">
            <img alt="Brand" class="pull-left" style="margin-left: -15px;" src="Images/logo-resized.png">
</a>

更改导航栏品牌类的高度

或

   <style>
   .navbar-brand img {
     max-height: 40px;
     width: auto;
    }

   </style>