滚动时如何更改固定顶部导航栏的背景颜色?

时间:2019-03-31 18:16:13

标签: scroll bootstrap-4 navbar background-color

我无法更改固定顶部导航栏的背景颜色。 有什么建议么?

我正在使用Bootstrap,并且在下面附加了html和CSS。

我尝试了很多不同的事情,但是我必须做错什么。 我将是最简单的方法,因为我是初学者:)

非常感谢!

<!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand js-scroll-trigger" href="#page-top"> <img src="img/logo.png" width=100rem; class="text-align-center m-3">Austroitalianos</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="fas 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="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="posts.html">Posts</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
#mainNav {
  min-height: 56px;
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}

#mainNav .navbar-toggler {
  font-size: 80%;
  padding: 0.75rem;
  color: #161616;
  border: 1px solid #161616;
}
#mainNav .navbar-nav .nav-item:active, #mainNav .navbar-nav .nav-item:focus {
  outline: none;
}

@media (max-width: 992px) {
  #mainNav {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: white;
    background-color: white; 
  }  
  #mainNav .navbar-brand {
    padding: .5rem 0;
    color: #161616;
  }
  #mainNav .nav-link {
    padding: 0.5rem;
    color: #161616;
  }
  #mainNav .nav-link:active {
    color: #64a19d;
  }
  #mainNav.navbar-shrink .nav-link {
    color: #161616;
    padding: 0.5rem;
    border-bottom: 0.25rem solid transparent;
  }
  #mainNav.navbar-shrink .nav-link.active {
    color: #64a19d;
    outline: none;
    border-bottom: 0.25rem solid #64a19d;
  }
}

0 个答案:

没有答案