我需要帮助在响应式折叠时使这个导航栏全屏显示

Question

我需要让我的导航栏在响应式折叠时全屏和黑色，但不知道该怎么做。这是我的导航栏

    <div class="container-fluid">
    <a class="navbar-brand item1 custp-4" href="index.php"><img src="Brainster-Logo2.png" width="30%" class="custlog" alt="Brainster Logo"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <i class="fas fa-plus ssj2"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0 align-items-center">
        <li class="nav-item">
          <a class="nav-link fw-bold active asd" aria-current="page" target="_blank" href="https://marketpreneurs.brainster.co">Академија за маркетинг</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fw-bold active asd" target="_blank" href="https://codepreneurs.brainster.co">Академија за програмирање</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fw-bold active asd" target="_blank" href="https://datascience.brainster.co/">Академија за data science</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fw-bold active asd" target="_blank" href="https://design.brainster.co">Академија за дизајн</a>
        </li>
      </ul>
      <a href="form.php"><button class="btn btn-danger rounded itemk tntt">Вработи наш студент</button></a>
      </div>
    </div>
    </nav>~~~

It needs to be fullscreen and black when I click on the hamburger menu, and I have no idea how to do it.

Answer 1

这可能对您有帮助：

在 Codepen 上查看它的运行情况：https://codepen.io/manaskhandelwal1/pen/ExNyLJM?editors=1100

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  background-color: #111;
}

.nav-visible {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 50px;
}

.navbar-toggler {
  color: #eee;
}

.navbar-nav {
  background-color: #000;
  height: calc(100vh - 100px);
  text-align: center;
  padding-top: 80px;
}

.nav-item {
  margin: 15px 0px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav>
  <div class="container-fluid p-0">
    <div class="nav-visible">
      <a class="navbar-brand item1 custp-4" href="index.php"><img src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png" width="8%" class="custlog" alt="Brainster Logo"></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fas fa-plus ssj2"></i>
    </div>
    </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link fw-bold active asd" aria-current="page" target="_blank" href="https://marketpreneurs.brainster.co">Академија за маркетинг</a>
          </li>
          <li class="nav-item">
            <a class="nav-link fw-bold active asd" target="_blank" href="https://codepreneurs.brainster.co">Академија за програмирање</a>
          </li>
          <li class="nav-item">
            <a class="nav-link fw-bold active asd" target="_blank" href="https://datascience.brainster.co/">Академија за data science</a>
          </li>
          <li class="nav-item">
            <a class="nav-link fw-bold active asd" target="_blank" href="https://design.brainster.co">Академија за дизајн</a>
          </li>
          <li class="nav-item">
            <a href="form.php"><button class="btn btn-danger rounded itemk tntt">Вработи наш студент</button></a>
          </li>
        </ul>
      </div>
    </div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>

我需要帮助在响应式折叠时使这个导航栏全屏显示

Im need for help to make this navbar fullscreen when collapsed in responsive

html

javascript

css

jquery

navbar