Question

我试图修复导航栏，以更改新的颜色，填充，边距，但是它不起作用。我添加了背景视频后就发生了。 Navbar Toggler也是如此，当我将其缩小到电话视图时，它无法正常工作。我花了3个小时来修复它。谁能帮我找到我可能自己找不到的任何故障。

**HTML (Including background video)**

<body>
  <!-- Start full screen video background -->
  <div class="video-bg video-bg--fullscreen demo-video">
    <video autoplay muted loop poster="files/new-york-traffic-jam.jpg">
        <source src="files/new-york-traffic-jam.mp4" type="video/mp4">
        <source src="files/new-york-traffic-jam.webm" type="video/webm">
        <source src="files/new-york-traffic-jam.ogv" type="video/ogg">
    </video>
  </div>
  <!-- End full screen video background -->

  <section id="title">
    <div class="container-fluid">
    <!-- Nav Bar -->
      <nav class="navbar sticky-top navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="">CompareFreight</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">

          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="">How To Pack</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Become Agent</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Support</a>
            </li>
          </ul>

        </div>
      </nav>
   </div>
  </section>

**CSS(Including background video)**

.video-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

.video-bg video {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
       -moz-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

    .video-bg--fullscreen {
        position: fixed;
    }
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none; 
    background: rgba(0,0,0,0.5);
}

.video-bg.demo-video {
    background-image: url(files/new-york-traffic-jam.jpg);
}

.js .video-bg video {
    opacity: 0;
    -webkit-transition: opacity .8s linear;
       -moz-transition: opacity .8s linear;
            transition: opacity .8s linear;
}
.js .video-bg video.is-playing {
    opacity: 1;
}
body {
  font-family: "Montserrat";
}



.container-fluid {
  padding: 3% 15% 7%;
}

h1 {
  font-family: 'Montserrat';
  font-size: 3rem;
  line-height: 1.5;
  color: #5bc0de;
}

h2 {
  font-family: "Montserrat";
  font-size: 3rem;
  line-height: 1.5:
}

h3 {
  font-family: 'Montserrat';
  font-size: 1.5rem;
  color: #ffffff;
}

p {
  color: #ffffff;
}
/* navigation Bar */

.navbar {
  padding 0 0 2.5rem;
}

.navbar-brand {
  font-family: "Comfortaa";
  font-size: 2rem;
  font-weight: lighter;
  color: #FF0000;
}

.nav-item {
  padding: 0 18px;
}

.nav-link {
  font-size: 1rem;
  font-family: "Comfortaa";
  font-weight: bold;
  color: #ffffff;
}

如何修复根本不起作用的导航栏和导航栏切换器？

0 个答案: