导航栏切换器在展开时不会变成“X”

问题描述 投票：0回答：1

对于contex，我使用HTML和CSS（通过CDN连接的链接/脚本标签使用Bootstrap 5）来创建前端响应式静态网站。 我的问题是，当切换器展开时，它应该变成“X”，但什么也没发生。我该如何解决这个问题？

我已经包含了导航栏代码，以防万一它有帮助。

.navbar {
    background-color: rgba(220, 20, 60, 0.9);
    --bs-navbar-padding-y: 0 !important;
}
.navHT {
    background: none;
    text-decoration: none;
    padding-right: 4rem;
}
/* *** START OF NAVBAR TOGGLER *** */
.navbar-toggler {
    width: 20px;
    height: 20px;
    position: relative;
    transition: 0.5s ease-in-out;
}
.navbar-toggler, .navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
    border: 0 !important;
}
.navbar-toggler span {
    margin: 0;
    padding: 0;
}
.toggler-icon {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: white;
    border-radius: 1px;
    opacity: 1;
    left: 0;
    transform: rotate(0turn);
    transition: 0.25s ease-in-out;
}
/* .middle-bar {
margin-top: 0px;
}
/* when nav is clicked: */
.navbar-toggler .top-bar {
    margin-top: 0px;
    transform: rotate(0.375turn);
}
.navbar-toggler .middle-bar {
    opacity: 0;
    filter: opacity(0%);
}
.navbar-toggler .bottom-bar {
    margin-top: 0px;
    transform: rotate(0.625turn);
}
/* state when navbar is collapsed: */
.navbar-toggler.collapse .top-bar {
    margin: 0px;
    margin-top: -20px;
    transform: rotate(0turn);
}
.navbar-toggler.collapse .middle-bar {
    opacity: 1;
    margin: 0px;
    filter: opacity(100%);
}
.navbar-toggler.collapse .bottom-bar {
    margin-top: 20px;
    transform: rotate(0turn);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>


<nav class="navbar navbar-dark navbar-expand-lg">
    <div class="container-fluid" style="padding: 0 !important; margin: 0 !important;">
        <a href="" class="navbar-brand mb-0 h1">
            <img class="d-sm-inline-block align-top d-none logo" src="companynameimages/Company-vosb-logo.jpeg" width="160" height="30">
        </a>
        <a href="" class="navbar navHT" style="color: white">Company Name</a>
        <button class="navbar-toggler collapse d-flex d-lg-none flex-column justify-content-around" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"  aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="toggler-icon top-bar"></span>
            <span class="toggler-icon middle-bar"></span>
            <span class="toggler-icon bottom-bar"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="" class="nav-link active" aria-current="page">About</a>
                </li>
                <li class="nav-item dropdown">
                    <button href="" class="nav-link active dropbtn">Services
                        <div class="dropdown-content">
                            <span>
                                <a class="dropdown-item dropdown-content active"
                                href="">Service One</a><br>
                                <a class="dropdown-item dropdown-content active"
                                href="">Service Two</a>
                            </span>

                        </div>
                    </button>
                </li>
                <li class="nav-item active">
                    <a class="nav-link active contact" href="/Users/elisecarlson/coding/name/companyName/contact.html" target="_blank">Contact</a>
                </li>
                <!-- <li class="nav-item active">
                    <form action="" class="d-flex">
                        <input type="text" class="form-control me-2">
                        <button type="submit" class="btn btn-outline-light">Search</button>
                    </form>
                </li> -->
            </ul>
        </div>
    </div>
</nav>

我尝试更改CSS属性transform:rotate()中的数字（单位为“turn”），但没有任何反应。我搜索过互联网和 Bootstrap 文档，但无法弄清楚。 我看了这篇文章好几篇帖子，但它们似乎没有解决我的问题（除非我错过了一些东西）。

html css flexbox bootstrap-5 navbar
1个回答
0
投票

正如评论中所建议的，引导程序使用的类是

collapsed
。需要更改 CSS 和某些折叠的 HTML 元素（菜单、按钮）中的内容。

.navbar {
  background-color: rgba(220, 20, 60, 0.9);
  --bs-navbar-padding-y: 0 !important;
}

.navHT {
  background: none;
  text-decoration: none;
  padding-right: 4rem;
}


/* *** START OF NAVBAR TOGGLER *** */

.navbar-toggler {
  width: 20px;
  height: 20px;
  position: relative;
  transition: 0.5s ease-in-out;
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  box-shadow: none;
  border: 0 !important;
}

.navbar-toggler span {
  margin: 0;
  padding: 0;
}

.toggler-icon {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: white;
  border-radius: 1px;
  opacity: 1;
  left: 0;
  transform: rotate(0turn);
  transition: 0.25s ease-in-out;
}


/* .middle-bar {
margin-top: 0px;
}
/* when nav is clicked: */

.navbar-toggler .top-bar {
  margin-top: 0px;
  transform: rotate(0.375turn);
}

.navbar-toggler .middle-bar {
  opacity: 0;
  filter: opacity(0%);
}

.navbar-toggler .bottom-bar {
  margin-top: 0px;
  transform: rotate(0.625turn);
}


/* state when navbar is collapsed: */

.navbar-toggler.collapsed .top-bar {
  margin: 0px;
  margin-top: -20px;
  transform: rotate(0turn);
}

.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
  margin: 0px;
  filter: opacity(100%);
}

.navbar-toggler.collapsed .bottom-bar {
  margin-top: 20px;
  transform: rotate(0turn);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
<nav class="navbar navbar-dark navbar-expand-lg">
  <div class="container-fluid" style="padding: 0 !important; margin: 0 !important;">
    <a href="" class="navbar-brand mb-0 h1">
      <img class="d-sm-inline-block align-top d-none logo" src="companynameimages/Company-vosb-logo.jpeg" width="160" height="30">
    </a>
    <a href="" class="navbar navHT" style="color: white">Company Name</a>
    <button class="navbar-toggler collapsed d-flex d-lg-none flex-column justify-content-around" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="toggler-icon top-bar"></span>
      <span class="toggler-icon middle-bar"></span>
      <span class="toggler-icon bottom-bar"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="" class="nav-link active" aria-current="page">About</a>
        </li>
        <li class="nav-item dropdown">
          <button href="" class="nav-link active dropbtn">Services <div class="dropdown-content">
              <span>
                <a class="dropdown-item dropdown-content active" href="">Service One</a>
                <br>
                <a class="dropdown-item dropdown-content active" href="">Service Two</a>
              </span>
            </div>
          </button>
        </li>
        <li class="nav-item active">
          <a class="nav-link active contact" href="/Users/elisecarlson/coding/name/companyName/contact.html" target="_blank">Contact</a>
        </li>
        <!-- <li class="nav-item active"><form action="" class="d-flex"><input type="text" class="form-control me-2"><button type="submit" class="btn btn-outline-light">Search</button></form></li> -->
      </ul>
    </div>
  </div>
</nav>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.