Question

我正在努力实现以下目标，请参见下图。当折叠菜单打开时，我希望黄色条向下延伸。目前，导航链接已隐藏在徽标后面，如下图所示。

当单击/打开折叠菜单时，如何扩展黄色栏？预先感谢

这是我的代码：

body {
  margin-top: 60px; 
}

.navbar .nav-link {
  font-size: 14px;
  text-transform: uppercase;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.navbar .nav-item.active {
  border-left: #fff 3px solid;
}

.navbar-brand {                
  position: absolute;
  top: -60px;
  z-index: 900;
  width: 180px;
  height: 180px;
}

.navbar {
  height: 5rem !important;
}

.navbar-stripes {
  height: 1rem;
}

nav h1 {
  font-family: 'Staatliches', cursive;
  position: relative;
  left: 200px;
  top: 5px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
    crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
    crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <title>Brisol Futsal Club</title>
</head>

<body>
  <div class="bg-primary navbar-stripes"></div>
  <nav class="navbar navbar-expand-md navbar-light bg-warning">
    <div class="container">
      <a href="index.html" class="navbar-brand">
        <img src="https://i.imgur.com/1c8K4fu.png" alt="" class="img-fluid">
      </a>
      <div class="row">
        <h1 class="text-white d-none d-lg-block">Brisol Futsal Club</h1>
      </div>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a href="index.html" class="nav-link">Home</a>
          </li>
          <li class="nav-item">
            <a href="about.html" class="nav-link">About Us</a>
          </li>
          <li class="nav-item">
            <a href="players.html" class="nav-link">Players</a>
          </li>
          <li class="nav-item">
            <a href="sponsors.html" class="nav-link">Sponsors</a>
          </li>
          <li class="nav-item">
            <a href="contact.html" class="nav-link">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="bg-success navbar-stripes"></div>

  
</body>

</html>

Answer 1

从您的CSS中删除%I的高度，并为.navbar类添加margin-top，它将起作用

.navbar-nav

尝试下面的代码段

 @media only screen and (max-width: 767px) {
      .navbar-nav{
        margin-top:80px;
       }
    }

body {
  margin-top: 60px; 
}

.navbar .nav-link {
  font-size: 14px;
  text-transform: uppercase;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.navbar .nav-item.active {
  border-left: #fff 3px solid;
}

.navbar-brand {                
  position: absolute;
  top: -60px;
  z-index: 900;
  width: 180px;
  height: 180px;
}
@media only screen and (max-width: 767px) {
  .navbar-nav{
  margin-top:80px;
}
}

/*.navbar {
  height: 5rem !important;
}*/

.navbar-stripes {
  height: 1rem;
}

nav h1 {
  font-family: 'Staatliches', cursive;
  position: relative;
  left: 200px;
  top: 5px;
}

如何使折叠的导航菜单向下打开

1 个答案: