透明 Bootstrap 导航栏 [英] Transparent Bootstrap navbar

问题描述

我正在开发一个网站，我希望导航(仅主页主页)透明并且图像覆盖全屏.这是我目前所拥有的:

导航栏采用这种方式，因为它在其他页面上也是如此.

这是我的 HTML:

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top navbar-trans" id="mainNav"><a class="navbar-brand js-scroll-trigger" href="#page-top"><img class="logo" src="app/assets/images/bunklogo.png" alt="bunk">假寐.</a><button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="切换导航">菜单<i class="fa fa-bars"></i><div class="collapse navbar-collapse" id="navbarResponsive"><ul class="navbar-nav ml-auto"><li class="nav-item"><a class="nav-link js-scroll-trigger" href="#tenant">TENANT</a><li class="nav-item"><a class="nav-link js-scroll-trigger" href="landlord.html">LANDLORD</a><li class="nav-item"><a class="nav-link js-scroll-trigger" href="#bunkfaqs">BUNK 常见问题</a><li class="nav-item"><a class="nav-link js-scroll-trigger" href="#blog">BLOG</a><li class="nav-item"><a class="nav-link js-scroll-trigger" href="#team">TEAM</a><li class="nav-item"><a class="nav-link js-scroll-trigger" href="#login">登录</a><li class="nav-iten"><button class="btn注册">注册
</nav>

和我的 css:

#mainNav {背景图像:线性渐变(90 度，#439EE0 0%，#26ADE6 100%)；/*边距顶部:-0.5%;*/填充顶部:1rem;填充底部:3rem;底边距:0；}.navbar-toggler.navbar-toggler-right {白颜色;边框:1px纯白色；字体大小:1.2rem；填充:1rem；}.navbar-light .navbar-nav .nav-link {字体大小:1.2rem；颜色:#ffffff；字母间距:0.8px；文本对齐:居中；填充右:5rem；}.navbar-brand.js-scroll-trigger {颜色:#ffffff；字体大小:2rem；}

有什么建议吗?

解决方案

这里不需要任何自定义 css hack.

要使 Bootstrap 导航栏透明，您只需删除 bg-light 类.

就是这样！

bg-light 中的 bg 代表背景".因此，如果您省略背景颜色的类，您将自动拥有一个透明的导航栏.

I am working on a website and I want the navigation (only home the homepage) to be transparent and the image to cover the full screen. This is what I have so far:

The nav-bar is styled in this way because that's how it is on the other pages.

This is my HTML:

<div class="container-fluid">
      <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top navbar-trans" id="mainNav">

          <a class="navbar-brand js-scroll-trigger" href="#page-top">
            <img class="logo" src="app/assets/images/bunklogo.png" alt="bunk">
            Bunk.
          </a>
          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
              Menu
              <i class="fa fa-bars"></i>
          </button>
          <div class="collapse navbar-collapse" id="navbarResponsive">
              <ul class="navbar-nav ml-auto">
                  <li class="nav-item">
                      <a class="nav-link js-scroll-trigger" href="#tenant">TENANT</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link js-scroll-trigger" href="landlord.html">LANDLORD</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link js-scroll-trigger" href="#bunkfaqs">BUNK FAQs</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link js-scroll-trigger" href="#blog">BLOG</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link js-scroll-trigger" href="#team">TEAM</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link js-scroll-trigger" href="#login">LOG IN</a>
                  </li>
                  <li class="nav-iten">
                    <button class="btn signup"> SIGN UP</button>
                  </li>
              </ul>
          </div>
      </nav>
  </div>

and my css:

#mainNav {
  background-image: linear-gradient(90deg, #439EE0 0%, #26ADE6 100%);
  /*margin-top: -0.5%;*/
  padding-top: 1rem;
  padding-bottom: 3rem;
  margin-bottom: 0;
}

.navbar-toggler.navbar-toggler-right {
  color:white;
  border: 1px solid white;
  font-size: 1.2rem;
  padding: 1rem;
}

.navbar-light .navbar-nav .nav-link {
  font-size: 1.2rem;
  color: #ffffff;
  letter-spacing: 0.8px;
  text-align: center;
  padding-right: 5rem;
}

.navbar-brand.js-scroll-trigger {
  color: #ffffff;
  font-size: 2rem;
}

Any suggestions?

解决方案

There's no need for any custom css hacks here.

To make your Bootstrap navbar transparent, all you need is to remove the class bg-light.

That's it!

The bg in bg-light stands for "background". So, if you leave out the class for background color, you automatically have a transparent navbar.

这篇关于透明 Bootstrap 导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！