如何为现有透明导航栏添加黑色导航栏及指定位置新增全屏黑导航栏

嘿，我来帮你搞定这两个导航栏的需求，分情况给你拆解具体的实现思路和代码示例：

如果是想在当前透明导航栏的下方新增一个横跨全屏的黑色导航栏，直接在原<nav>标签后面加个新的导航元素就行，超级简单：

代码示例 #

<!-- 你的原透明导航栏 -->
<nav class="navbar navbar-expand-lg fixed-top navbar-transparent" color-on-scroll="500">
  <div class="container">
    <div class="navbar-translate">
      <button class="navbar-toggler navbar-burger" type="button" data-toggle="collapse" data-target="#navbarMenu">
        <!-- 汉堡按钮内容 -->
      </button>
      <a class="navbar-brand" href="#">some text</a>
    </div>
    <div class="collapse navbar-collapse" id="navbarMenu">
      <!-- 导航菜单内容 -->
    </div>
  </div>
</nav>

<!-- 新增的黑色导航栏 -->
<nav style="background-color: black; width: 100%;">
  <div class="container">
    <!-- 这里可以放第二个导航栏的内容，比如菜单项、搜索框等 -->
    <p style="color: white; margin: 0; padding: 10px 0;">这是新增的黑色导航栏</p>
  </div>
</nav>

另外，看到你的原导航栏有color-on-scroll="500"属性，如果你其实是想让原透明导航栏滚动到一定位置后变成黑色（很多模板自带这个滚动变色逻辑），那只需要补全对应的CSS就行：

/* 假设滚动后模板会给导航栏加navbar-solid类，你可以自定义这个类的样式 */
.navbar-solid {
  background-color: black !important;
}

原导航栏是包裹在container里的，默认有左右内边距，要让黑色栏突破这个限制全屏显示，有两种实用思路：

思路1：用绝对定位+父元素相对定位 #

给「some text」的父元素加相对定位，然后在其内部添加一个绝对定位的黑色栏，利用left:0; right:0实现全屏：

<nav class="navbar navbar-expand-lg fixed-top navbar-transparent" color-on-scroll="500">
  <div class="container">
    <div class="navbar-translate">
      <button class="navbar-toggler navbar-burger" type="button" data-toggle="collapse" data-target="#navbarMenu">
        <!-- 汉堡按钮 -->
      </button>
      <a class="navbar-brand" href="#" style="position: relative;">
        some text
        <!-- 新增的全屏黑色栏 -->
        <div style="background-color: black; height: 20px; position: absolute; left: 0; right: 0; top: 100%;"></div>
      </a>
    </div>
    <div class="collapse navbar-collapse" id="navbarMenu">
      <!-- 菜单内容 -->
    </div>
  </div>
</nav>

思路2：将黑色栏放在container外，用视口宽度实现全屏 #

如果不想动原有的container结构，直接把黑色栏放在<nav>内部但container外面，用width:100vw占满视口宽度：

<nav class="navbar navbar-expand-lg fixed-top navbar-transparent" color-on-scroll="500">
  <div class="container">
    <div class="navbar-translate">
      <button class="navbar-toggler navbar-burger" type="button" data-toggle="collapse" data-target="#navbarMenu">
        <!-- 汉堡按钮 -->
      </button>
      <a class="navbar-brand" href="#">some text</a>
    </div>
    <div class="collapse navbar-collapse" id="navbarMenu">
      <!-- 菜单内容 -->
    </div>
  </div>
  <!-- 新增的全屏黑色栏 -->
  <div style="background-color: black; height: 20px; width: 100vw; margin-left: calc(-50vw + 50%);"></div>
</nav>

小提示： #

• 因为原导航栏是fixed-top，记得给页面的body加padding-top，避免页面内容被导航栏挡住；
• 如果你不需要额外样式，只保留background-color: black; width: 100%;（或width:100vw）这些核心属性就行，高度可以根据需求调整。

内容的提问来源于stack exchange，提问作者user9645789