移动引导导航条测量等于它的高度

Move Bootstrap navbar measurement equal to its height

本文关键字：于它 高度 测量 导航 移动      更新时间：2023-09-26

我正在使用bootstrap开发的网站有一个标题图像，后面是一个bootstrap导航条。我们喜欢在图像上有一个透明的导航条，但是当导航条开始堆积在手机上时，它看起来很奇怪。

JSFiddle

我想做的是如下

  1. 将导航条向上移动，使其与标题图像的底部边缘对齐，并位于标题图像的顶部。

  2. 使导航条的背景为50%黑色，白色文字。

  3. 当导航条换行到多行时，我希望它移回图像下方，背景色恢复为纯色#808184。

CSS 

.navbar-engage {
    background-color: rgba(0,0,0,0.5);
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
 -ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
    border-color: #e7e7e7;
    color: #FFFFFF;
}
HTML 

<body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12" style="background-color:#FABC41; height: 50px;">BAR</div>
      </div>
      <div class="row">
        <div class="col-sm-12" style="padding:0;"><img class="img-responsive" src="http://travelandwildlifephotography.com/wp-content/uploads/2014/07/Camping-on-Fraser-Island1.jpg" alt="CLI Engage"> </div>
      </div>
    </div>
    <nav class="navbar navbar-engage">
      <div class="container-fluid">
        <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div>
        <div>
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">About Us</a></li>
                <li><a href="#">Page 1-2</a></li>
                <li><a href="#">Page 1-3</a></li>
              </ul>
            </li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a></li>
          </ul>
        </div>
      </div>
    </nav>

1)似乎导航条将，只要它只有一行高，是一个恒定的高度50px。如果是这种情况，那么解决第一个问题就像添加

一样简单。
position:relative;
top:-50px;

到.navbar-engage。如果不是这种情况(导航条可以改变高度，即使它只有一行高-比如如果字体大小改变)，那么就需要一点javascript来完成这项工作。

2)当导航栏为一行时，要改变文本颜色，我们需要一个媒体查询。当导航栏为单行时，下面的代码将使文本变为白色:

@media (min-width: 768px) {
    .navbar-engage a  {
        color:white;
    }
    .navbar-engage li a:hover {
        color:black;
    }
}

添加第二个选择器.navbar-engage li a:hover，使文本在悬停时变为黑色。这不是您最初请求的一部分，但它极大地增加了内容的可读性。要不要随你。

3)我们所需要做的就是添加另一个媒体查询，它将撤销我们的定位更改并修改导航栏的背景颜色: 
@media (max-width: 767px) {
    .navbar-engage {
        top:0px;
        background:#808184;
    }
}
最终的CSS看起来像这样: 
.navbar-engage {
    background-color: rgba(0, 0, 0, 0.5);
    filter: progid: DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
    -ms-filter: progid: DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
    border-color: #e7e7e7;
    color: #FFFFFF;
    position: relative;
    top: -50px;
}
@media (min-width: 768px) {
    .navbar-engage a {
        color: white;
    }
    .navbar-engage li a:hover {
        color: black;
    }
}
@media (max-width: 767px) {
    .navbar-engage {
        top: 0px;
        background: #808184;
    }
}

请记住，但是，为了单独使用CSS做到这一点，必须硬编码一些数字，这意味着对标记的更改可能会导致CSS需要稍微调整以使其正常工作。

我这里也有工作小提琴

相关文章：