固定导航栏与其他内容重叠

时间：2020-08-10 23:20:36

标签： html css

我正在尝试在导航栏下添加更多内容，但是每次我尝试导航栏与下一个项目重叠时，我都希望修复以使其始终在网站上可见。 我还尝试了z-index，这不是问题。

我不知道引导程序是否已预装东西，但这让我发疯了。

/* roots and body stuff */

body {
  font-family: "Roboto", sans-serif;
  color: #1a1818;
}


/* nav bar stuff */

.logo-and-section-container {
  width: 100%;
  display: flex;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  position: fixed;
}

.navbar-logo-container {
  width: 5%;
}

.brand-logo {
  width: 80px;
  padding-right: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.union-logo-img {
  width: 100%;
}

.union-logo-text-for-media-query {
  font-size: 0;
}

.section-container {
  display: flex;
  align-items: center;
  margin-left: 40px;
}

.dropdown {
  font-size: 1.2rem;
  margin-right: 8px;
}

.fa-arrow-right {
  font-size: 0.8rem;
  margin-right: 2em;
  margin-left: 0.3em;
}

.secion-dropdown,
.fa-arrow-right {
  color: #1a1818;
  text-decoration: none;
  transition: all 0.3s ease-out;
}

.secion-dropdown:hover {
  text-decoration: none;
  color: #e14f17;
}

.secion-dropdown:hover>.fa-arrow-right {
  transform: rotate(90deg);
  color: #e14f17;
}

.search-bar-container {
  width: 45%;
  padding-left: 1%;
  display: flex;
  justify-content: flex-end;
}

.search-bar {
  align-self: center;
}

.search-button,
.btn-outline-success {
  color: black;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.search-button:hover,
.btn-outline-success:hover {
  color: #fff;
  background-color: #e14f17;
  border-color: #e14f17;
}

@media (max-width: 916px) {
  .search-bar-container {
    visibility: hidden;
    padding-left: 1000000px;
  }
  .logo-and-section-container {
    padding-top: 3rem;
    padding-bottom: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .union-logo-img {
    width: 10rem;
    margin-right: 2em;
    margin-bottom: 16px;
  }
  .navbar-logo-container {
    flex-direction: column;
    text-decoration: none;
    padding-bottom: 1.75rem;
  }
  .union-logo-text-for-media-query {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1818;
    display: flex;
    text-decoration: none;
  }
  a:hover {
    text-decoration: none;
  }
  .section-container {
    text-align: center;
    padding-right: 7%;
  }
  .fa-arrow-right {
    padding-left: 15px;
  }
}


/* nav bar stuff ends */

.division-bar {
  width: 80%;
  height: 2em;
  background: purple;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
  <link rel="stylesheet" href="/union project/style.css" />
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="https://kit.fontawesome.com/fa5117c01c.js" crossorigin="anonymous"></script>
  <link rel="icon" href="img/Union-U-Orange.png" />
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet" />
  <title>UNION BINDINGS CO.</title>
</head>

<body>
  <!-- nav bar and hearder -->
  <div class="logo-and-section-container">
    <nav class="navbar-logo-container">
      <a class="brand-logo" href="#">
        <img src="/union project/img/Union-U-Orange.png" alt="union logo orange" class="union-logo-img" />
        <p class="union-logo-text-for-media-query">UNION BINDINGS CO.</p>
      </a>
    </nav>
    <div class="section-container">
      <div class="dropdown">
        <a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products<i class="fas fa-arrow-right"></i
          ></a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">All mountain</a>
          <a class="dropdown-item" href="#">Freestyle</a>
          <a class="dropdown-item" href="#">Splitboarding</a>
        </div>
      </div>
      <div class="dropdown">
        <a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Technology<i class="fas fa-arrow-right"></i
          ></a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">100% Focus</a>
          <a class="dropdown-item" href="#">Forged Carbon</a>
          <a class="dropdown-item" href="#">Jet Fusion Printing</a>
          <a class="dropdown-item" href="#">Union Specific Technology</a>
        </div>
      </div>
      <div class="dropdown">
        <a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Team<i class="fas fa-arrow-right"></i
          ></a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">International Team</a>
          <a class="dropdown-item" href="#">Team Movie</a>
        </div>
      </div>
      <div class="dropdown">
        <a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Support<i class="fas fa-arrow-right"></i
          ></a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Size Chart</a>
          <a class="dropdown-item" href="#">Disk Fit</a>
          <a class="dropdown-item" href="#">How to Set up Your Bindings</a>
        </div>
      </div>
      <div class="dropdown">
        <a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact<i class="fas fa-arrow-right"></i
          ></a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Local Shops</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Distributors</a>
        </div>
      </div>
    </div>
    <div class="search-bar-container">
      <nav class="search-bar">
        <form class="form-inline">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
          <button class="btn btn-outline-success my-2 my-sm-0 search-button" type="submit">
              Search
            </button>
        </form>
      </nav>
    </div>
  </div>
  <!-- nav bar and hearder ends -->
  <div class="division-bar"></div>
</body>

</html>

1 个答案:

答案 0 :(得分：1)

用以下代码替换您的身体。

body {
  font-family: "Roboto", sans-serif;
  padding-top: 80px;
}

.brand-logo {
  width: 80px;
  padding-right: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.union-logo-img {
  width: 100%;
}

.dropdown {
  font-size: 1.2rem;
  margin-right: 8px;
}

.fa-arrow-right {
  font-size: 0.8rem;
  margin-right: 2em;
  margin-left: 0.3em;
}

.secion-dropdown,
.fa-arrow-right {
  color: #1a1818;
  text-decoration: none;
  transition: all 0.3s ease-out;
}

.secion-dropdown:hover {
  text-decoration: none;
  color: #e14f17;
}

.secion-dropdown:hover>.fa-arrow-right {
  transform: rotate(90deg);
  color: #e14f17;
}
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
  <link rel="stylesheet" href="/union project/style.css" />
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="https://kit.fontawesome.com/fa5117c01c.js" crossorigin="anonymous"></script>
  <link rel="icon" href="img/Union-U-Orange.png" />
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet" />
  <title>UNION BINDINGS CO.</title>
</head>
<body>
  <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#"><img src="/union project/img/Union-U-Orange.png" alt="Logo" class="union-logo-img" /></a>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active">
          <div class="dropdown">
            <a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products<i class="fas fa-arrow-right"></i
              ></a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">All mountain</a>
              <a class="dropdown-item" href="#">Freestyle</a>
              <a class="dropdown-item" href="#">Splitboarding</a>
            </div>
          </div>
        </li>
        <li class="nav-item active">
          <div class="dropdown">
            <a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Technology<i class="fas fa-arrow-right"></i
              ></a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">100% Focus</a>
              <a class="dropdown-item" href="#">Forged Carbon</a>
              <a class="dropdown-item" href="#">Jet Fusion Printing</a>
              <a class="dropdown-item" href="#">Union Specific Technology</a>
            </div>
          </div>
        </li>
        <li class="nav-item active">
          <div class="dropdown">
            <a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Team<i class="fas fa-arrow-right"></i
              ></a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">International Team</a>
              <a class="dropdown-item" href="#">Team Movie</a>
            </div>
          </div>
        </li>
        <li class="nav-item active">
          <div class="dropdown">
            <a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Support<i class="fas fa-arrow-right"></i
              ></a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">Size Chart</a>
              <a class="dropdown-item" href="#">Disk Fit</a>
              <a class="dropdown-item" href="#">How to Set up Your Bindings</a>
            </div>
          </div>
        </li>
        <li class="nav-item active">
          <div class="dropdown">
            <a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact<i class="fas fa-arrow-right"></i
              ></a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">Local Shops</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Distributors</a>
            </div>
          </div>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</body>
我通过将navbar-expand-lg类添加到<nav>标签中，将Bootstrap Navbar切换器与responsive behaviors一起使用，徽标显示在左侧，切换器显示在右侧。还为固定导航栏添加了类fixed-top。要更改导航栏的颜色，请参考color schemes。

对于导航栏内容重叠的问题，最重要的解决方案是，padding-top中需要有body，这样才能很好地工作。 请查看此demo，以确保其正常工作。

相关问题
最新问题